sellmate-design-system-react 4.1.0 → 4.2.0

package/dist/index.js

@@ -6933,6 +6933,8 @@ var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
 var GNB_MENU_WIDTH = 240;
+var GNB_FULL_LOGO_WIDTH = 140;
+var GNB_TOP_ICON_GAP = 8;
 function findGnbRailValue(items, value) {
   if (items.some((item) => item.value === value)) return value;
   return findGnbAncestors(items, value)[0];
@@ -7037,6 +7039,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
+  topContent,
   railFooter,
   menuFooter,
   foldedFooter,
@@ -7268,13 +7271,67 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
-  const foldInline = !!logo;
   const sideFoldStyle = {
     opacity: railFolded ? 0 : 1,
     position: railFolded ? "absolute" : "static",
     visibility: railFolded ? "hidden" : "visible",
     transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}`
   };
+  const launcherButton = onLauncherClick ? /* @__PURE__ */ jsx(
+    SGhostButton,
+    {
+      icon: "launcher",
+      size: "xs",
+      intent: color === "dark" ? "inverse" : "default",
+      ariaLabel: "app launcher",
+      onClick: onLauncherClick,
+      className: "shrink-0",
+      style: { ...sideFoldStyle, marginRight: header === "fix" ? H.topGap : GNB_TOP_ICON_GAP }
+    },
+    "launcher"
+  ) : null;
+  const foldButton = /* @__PURE__ */ jsx(
+    SGhostButton,
+    {
+      icon: "sidebar",
+      size: "xs",
+      intent: color === "dark" ? "inverse" : "default",
+      ariaLabel: "toggle navigation",
+      ariaPressed: folded,
+      onClick: handleFoldToggle,
+      className: cn("shrink-0", header === "fix" && "ml-auto")
+    },
+    "fold"
+  );
+  const logoBox = logo ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex shrink-0 items-center",
+      style: {
+        height: H.logoHeight,
+        ...header === "full" ? (
+          // full 은 전폭이라 로고 자리가 고정이다 — 폭 140px(디자인 스펙, 전용 토큰 없음)로 못 박아
+          // 로고 내용이 바뀌어도 오른쪽 topContent 시작점이 흔들리지 않게 한다.
+          { width: GNB_FULL_LOGO_WIDTH, marginLeft: H.topGap }
+        ) : (
+          // fix 는 폴드가 ml-auto 로 밀려나므로(margin-left 를 못 쓴다) 로고 오른쪽에 최소 간격을 둔다
+          { marginRight: H.topGap }
+        ),
+        ...sideFoldStyle
+      },
+      children: logo
+    },
+    "logo"
+  ) : null;
+  const topContentBox = header === "full" && topContent ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex min-w-0 flex-1 items-center",
+      style: { marginLeft: H.topGap },
+      children: topContent
+    },
+    "topContent"
+  ) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7292,8 +7349,9 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
             className: "relative box-border flex shrink-0 items-center overflow-hidden",
             style: {
               height: H.topHeight,
-              // 인라인 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 런처↔폴드(8px)와
-              // 폴드↔로고(top-gap)를 다르게 두기 위함. 접히면 런처·로고가 흐름에서 빠져 margin 도 무의미해진다.
+              // 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 순서가 header 마다 달라
+              // 이웃 쌍마다 값이 다르기 때문(위 launcherButton/logoBox 주석).
+              // 접히면 런처·로고가 흐름에서 빠져 margin 도 무의미해진다.
               padding: `0 ${railFolded ? GNB_RAIL.padding : H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
@@ -7302,90 +7360,16 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
               // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
               color: C.itemColorDefault
             },
-            children: foldInline ? (
-              // 런처(있을 때)·폴드·로고를 흐름에 나란히 둔다 → 폴드 버튼이 (런처와) 로고 사이에 선다.
-              // 접히면 런처·로고가 페이드하며 흐름에서 빠지고(sideFoldStyle), 폴드 버튼만 남아 레일 가운데에 선다.
-              /* @__PURE__ */ jsxs(Fragment, { children: [
-                onLauncherClick && /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "launcher",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "app launcher",
-                    onClick: onLauncherClick,
-                    className: "shrink-0",
-                    style: { ...sideFoldStyle, marginRight: "8px" }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "sidebar",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "toggle navigation",
-                    ariaPressed: folded,
-                    onClick: handleFoldToggle,
-                    className: "shrink-0"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex shrink-0 items-center",
-                    style: { height: H.logoHeight, marginLeft: H.topGap, ...sideFoldStyle },
-                    children: logo
-                  }
-                )
-              ] })
-            ) : (
-              // 런처·로고는 좌측 그룹(흐름에서 빼 폭 축소 중 폴드 버튼을 밀어내지 않는다),
-              // 폴드 버튼은 우측 끝(ml-auto)이라 폭·패딩이 줄면 저절로 레일 가운데에 선다.
-              /* @__PURE__ */ jsxs(Fragment, { children: [
-                (onLauncherClick || logo) && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 flex items-center",
-                    style: {
-                      left: H.topPaddingX,
-                      gap: H.topGap,
-                      opacity: railFolded ? 0 : 1,
-                      transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}, transform ${GNB_FOLD_MS}ms ease-out`,
-                      // 메뉴와 같은 방향으로 빠지되, 좁은 레일 안에서 꼬리가 비치지 않게 페이드가 거리를 대신한다
-                      transform: railFolded ? `translateX(-${H.topPaddingX})` : "none",
-                      visibility: railFolded ? "hidden" : "visible"
-                    },
-                    children: [
-                      onLauncherClick && /* @__PURE__ */ jsx(
-                        SGhostButton,
-                        {
-                          icon: "launcher",
-                          size: "xs",
-                          intent: color === "dark" ? "inverse" : "default",
-                          ariaLabel: "app launcher",
-                          onClick: onLauncherClick,
-                          className: "shrink-0"
-                        }
-                      ),
-                      logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "sidebar",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "toggle navigation",
-                    ariaPressed: folded,
-                    onClick: handleFoldToggle,
-                    className: "ml-auto shrink-0"
-                  }
-                )
-              ] })
-            )
+            children: header === "fix" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              launcherButton,
+              logoBox,
+              foldButton
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              launcherButton,
+              foldButton,
+              logoBox,
+              topContentBox
+            ] })
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -13435,6 +13419,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDropdownButton2 as SDropdownButton, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map