sellmate-design-system-react 9.0.0-beta.35 → 9.0.0-beta.36

package/dist/index.cjs

@@ -6266,6 +6266,28 @@ var SSplitter2 = /* @__PURE__ */ Object.assign(SSplitterRoot, {
   Before: SSplitterBefore2,
   After: SSplitterAfter2
 });
+var SURFACE = {
+  default: {
+    bg: "var(--cmp-callout-default-bg)",
+    border: "var(--cmp-callout-default-border)",
+    content: "var(--cmp-callout-default-content)"
+  },
+  danger: {
+    bg: "var(--cmp-callout-danger-bg)",
+    border: "var(--cmp-callout-danger-border)",
+    content: "var(--cmp-callout-danger-content)"
+  },
+  // default 와 같은 안내인데 배경만 흰 면이다 — 회색 면(neutral·screen) 위에서 default 의
+  // 옅은 회색이 묻히는 자리에 쓴다.
+  //
+  // ⚠️ callout.white 토큰 그룹이 아직 없어 배경은 시스템 흰 면을, 테두리·본문색은 default 것을
+  // 빌려 쓴다. 디자인팀이 전용 토큰을 내면 이 세 줄을 그것으로 갈아끼운다(토큰 키는 만들지 않는다).
+  white: {
+    bg: "var(--sys-color-bg-frame)",
+    border: "var(--cmp-callout-default-border)",
+    content: "var(--cmp-callout-default-content)"
+  }
+};
 var DANGER_TITLE_LABEL = "\uC8FC\uC758\uC0AC\uD56D";
 function renderItems(message, depth = 1) {
   const out = [];
@@ -6299,10 +6321,11 @@ function renderItems(message, depth = 1) {
 }
 var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "default", message = [], children, className, style }, ref) {
   const isDanger = type === "danger";
+  const surface = SURFACE[type];
   const vars = {
-    "--co-bg": `var(--cmp-callout-${type}-bg)`,
-    "--co-border": `var(--cmp-callout-${type}-border)`,
-    "--co-content": `var(--cmp-callout-${type}-content)`
+    "--co-bg": surface.bg,
+    "--co-border": surface.border,
+    "--co-content": surface.content
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -9076,8 +9099,22 @@ function SModalOutlet() {
   return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: false, children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SModalEntryPortal, { entry }, entry.id)) }) });
 }
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+var SPageColumnContext = /* @__PURE__ */ react.createContext(null);
+function SPageColumn({ full, children }) {
+  const [scrolled, setScrolled] = react.useState(false);
+  const value = react.useMemo(() => ({ scrolled, setScrolled }), [scrolled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(SPageColumnContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex min-h-0 min-w-0 flex-1 flex-col",
+      style: full ? { gridArea: "page" } : void 0,
+      children
+    }
+  ) });
+}
 var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader && a.resizing === b.resizing;
 var SLayoutContext = /* @__PURE__ */ react.createContext(null);
+var isPageHeaderElement = (node) => react.isValidElement(node) && node.type?.displayName === "SPageHeader";
 var SLAYOUT_MIN_WIDTH = 1366;
 var SLAYOUT_MIN_WIDTH_VAR = "--s-layout-min-width";
 function useSLayout() {
@@ -9139,6 +9176,15 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
     // 단 폭을 끄는 중에는 전환을 끈다 — 그러지 않으면 열이 손보다 늦게 따라온다.
     transition: nav?.resizing ? "none" : `grid-template-columns ${nav?.foldMs ?? 0}ms ease-out`
   } : void 0;
+  const laidOutChildren = react.useMemo(() => {
+    const kids = react.Children.toArray(children);
+    const at = kids.findIndex(isPageHeaderElement);
+    if (at === -1) return children;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      kids.slice(0, at),
+      /* @__PURE__ */ jsxRuntime.jsx(SPageColumn, { full: isFullHeader, children: kids.slice(at) })
+    ] });
+  }, [children, isFullHeader]);
   return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -9152,7 +9198,7 @@ var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
       ),
       style: { ...minWidthStyle, ...frameStyle, ...style },
       ...rest,
-      children
+      children: laidOutChildren
     }
   ) });
 });
@@ -10517,63 +10563,12 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
     }
   );
 });
-var SPageHeader = /* @__PURE__ */ withDisplayName(
-  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled = false, className, style, ...rest }, ref) {
-    const hasBack = onBack != null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "header",
-      {
-        ref,
-        className: cn(
-          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
-          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
-            // 배경은 항상 투명 — 페이지 배경을 따라갈지는 fix 가 정하지 scrolled 가 정하지 않는다.
-            // 스크롤되면 그림자만 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
-            "bg-transparent pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
-            scrolled && "shadow-floating"
-          ),
-          className
-        ),
-        style,
-        ...rest,
-        children: [
-          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
-            SGhostButton,
-            {
-              icon: "chevronLeft",
-              size: "xs",
-              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
-              onClick: onBack,
-              className: "shrink-0"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex min-w-0 flex-1 items-center",
-                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
-                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
-                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
-              ]
-            }
-          ),
-          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
-        ]
-      }
-    );
-  }),
-  "SPageHeader"
-);
-var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
   frame: "bg-[var(--sys-color-bg-frame)]",
   neutral: "bg-[var(--sys-color-bg-neutralLight)]",
   screen: "bg-[var(--sys-color-bg-screen)]"
 };
+var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
@@ -10720,7 +10715,6 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   scrollEndSpacing = false,
   overlayScrollbar = false,
   contentHeight = "auto",
-  header,
   className,
   style,
   children,
@@ -10728,7 +10722,8 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   ...rest
 }, ref) {
   const layout = react.useContext(SLayoutContext);
-  const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
+  const column = react.useContext(SPageColumnContext);
+  const gridStyle = layout?.header === "full" && !column ? { gridArea: "page" } : void 0;
   const scrollRef = react.useRef(null);
   const setMainRef = react.useCallback(
     (node) => {
@@ -10737,10 +10732,10 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
     },
     [ref]
   );
-  const [scrolled, setScrolled] = react.useState(false);
+  const setColumnScrolled = column?.setScrolled;
   const handleScroll = (e) => {
     onScroll?.(e);
-    if (header != null && !header.fix) setScrolled(e.currentTarget.scrollTop > 0);
+    setColumnScrolled?.(e.currentTarget.scrollTop > 0);
   };
   const fill = contentHeight === "fill";
   const main = /* @__PURE__ */ jsxRuntime.jsx(
@@ -10755,69 +10750,86 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
         BACKGROUND_CLASS[background],
         className
       ),
-      style: header == null && !overlayScrollbar ? { ...gridStyle, ...style } : style,
+      style: !overlayScrollbar ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
-  if (!overlayScrollbar) {
-    if (header == null) return main;
-    return (
-      // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다.
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
-          style: gridStyle,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
-            main
-          ]
-        }
-      )
-    );
-  }
-  if (header == null) {
+  if (!overlayScrollbar) return main;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative min-h-0 min-w-0 flex-1 overflow-hidden",
+        BACKGROUND_CLASS[background]
+      ),
+      style: gridStyle,
+      children: [
+        main,
+        /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+      ]
+    }
+  );
+});
+
+// src/components/SPage/page.config.ts
+var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
+var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+var SPageHeader = /* @__PURE__ */ withDisplayName(
+  react.forwardRef(function SPageHeader2({ title, subText, fix = false, onBack, slot, scrolled, className, style, ...rest }, ref) {
+    const hasBack = onBack != null;
+    const column = react.useContext(SPageColumnContext);
+    const isScrolled = scrolled ?? column?.scrolled ?? false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      "header",
       {
+        ref,
         className: cn(
-          "relative min-h-0 min-w-0 flex-1 overflow-hidden",
-          BACKGROUND_CLASS[background]
+          "relative z-10 box-border flex shrink-0 items-center gap-(--cmp-pageHeader-gap) px-(--cmp-pageHeader-paddingX)",
+          // 배경은 두 베리에이션이 같은 흰 면이다 — fix 가 가르는 것은 높이·구분선·서브 텍스트 자리다.
+          // plain 에는 전용 배경 토큰이 없어 시스템 흰 표면을 쓴다(토큰이 생기면 그것으로 갈아끼운다).
+          fix ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
+            // 스크롤되면 그림자를 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
+            "bg-(--sys-color-bg-frame) pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
+            isScrolled && "shadow-floating"
+          ),
+          className
         ),
-        style: gridStyle,
+        style,
+        ...rest,
         children: [
-          main,
-          /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+          hasBack && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronLeft",
+              size: "xs",
+              ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
+              onClick: onBack,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center",
+                fix ? "flex-row gap-(--cmp-pageHeader-gap)" : "flex-col items-start gap-(--cmp-pageHeader-plain-title-gap)",
+                !hasBack && "pl-(--cmp-pageHeader-title-paddingLeft)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-heading-lg min-w-0 truncate text-(--cmp-pageHeader-title-text)", children: title }),
+                subText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-default min-w-0 truncate text-(--cmp-pageHeader-subtitle-text)", children: subText })
+              ]
+            }
+          ),
+          slot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center", children: slot })
         ]
       }
     );
-  }
-  return (
-    // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
-    // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
-    // 스크롤 요소가 아닌 여기서는 그냥 무시된다). fix 헤더는 자체 흰 배경이 덮으므로 무관하다.
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
-        style: gridStyle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
-            main,
-            /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
-          ] })
-        ]
-      }
-    )
-  );
-});
-
-// src/components/SPage/page.config.ts
-var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
-var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+  }),
+  "SPageHeader"
+);
 
 // src/components/STabs/tabs.config.ts
 var TAB_MAIN_SIZE = { height: 36, paddingX: 24 };
@@ -22569,6 +22581,7 @@ exports.SModal = SModal;
 exports.SModalOutlet = SModalOutlet;
 exports.SNumberInput = SNumberInput;
 exports.SPage = SPage;
+exports.SPageHeader = SPageHeader;
 exports.SPagination = SPagination;
 exports.SPopover = SPopover;
 exports.SPopup = SPopup;