sellmate-design-system-react 4.1.0 → 4.3.0

package/dist/index.cjs

@@ -3645,9 +3645,10 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
           !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
-          // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
-          bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
-          bordered && isExpanded && "!border-[#93C4FF]",
+          // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
+          // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
+          bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
+          bordered && isExpanded && "!border-border-accentLight",
           className
         ),
         ...rest,
@@ -6599,6 +6600,170 @@ function SLoadingModal({
     }
   );
 }
+var CLOSE_ANIMATION_DURATION2 = 300;
+function SDrawer({
+  open,
+  onOpenChange,
+  onClose,
+  persistent = false,
+  title = "",
+  width = 572,
+  footerLeft,
+  button,
+  children,
+  className,
+  style
+}) {
+  const [shaking, setShaking] = react.useState(false);
+  const [rendered, setRendered] = react.useState(() => Boolean(open));
+  const [entered, setEntered] = react.useState(false);
+  const [portalContainer, setPortalContainer] = react.useState(null);
+  const backdropPointerDownRef = react.useRef(false);
+  const contentRef = react.useRef(null);
+  const stackRegistrationRef = react.useRef(null);
+  const [layerIndex, setLayerIndex] = react.useState(null);
+  react.useEffect(() => {
+    if (open) {
+      setRendered(true);
+      return;
+    }
+    if (!rendered) return;
+    const timer = window.setTimeout(() => setRendered(false), CLOSE_ANIMATION_DURATION2);
+    return () => window.clearTimeout(timer);
+  }, [open, rendered]);
+  react.useEffect(() => {
+    if (!open) {
+      setEntered(false);
+      return;
+    }
+    setEntered(false);
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const registration = registerModalStackEntry();
+    stackRegistrationRef.current = registration;
+    setLayerIndex(registration.layerIndex);
+    return () => {
+      registration.unregister();
+      if (stackRegistrationRef.current === registration) stackRegistrationRef.current = null;
+    };
+  }, [open]);
+  const triggerShake = react.useCallback(() => {
+    setShaking(false);
+    requestAnimationFrame(() => setShaking(true));
+  }, []);
+  const guardClose = persistent ? (event) => {
+    event.preventDefault();
+    if (stackRegistrationRef.current?.isTop()) triggerShake();
+  } : void 0;
+  const handleBackdropInteraction = () => {
+    if (persistent) {
+      if (stackRegistrationRef.current?.isTop()) triggerShake();
+      return;
+    }
+    onOpenChange?.(false);
+  };
+  const modalHost = getModalHost();
+  return /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RDialog__namespace.Overlay,
+      {
+        forceMount: rendered ? true : void 0,
+        className: "pointer-events-auto absolute inset-0 bg-black/40 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out",
+        style: { zIndex: 0, animationFillMode: "forwards" },
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          backdropPointerDownRef.current = true;
+          handleBackdropInteraction();
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+          if (backdropPointerDownRef.current) {
+            backdropPointerDownRef.current = false;
+            return;
+          }
+          handleBackdropInteraction();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      RDialog__namespace.Content,
+      {
+        forceMount: rendered ? true : void 0,
+        ref: contentRef,
+        className: "pointer-events-auto absolute inset-y-0 right-0 w-fit max-w-full outline-none",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          contentRef.current?.focus({ preventScroll: true });
+        },
+        onEscapeKeyDown: guardClose,
+        onPointerDownOutside: guardClose,
+        onInteractOutside: guardClose,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Title, { className: "sr-only", children: title || "Drawer" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "pointer-events-auto relative flex h-full max-w-full translate-x-full flex-col overflow-hidden bg-[var(--cmp-drawer-bg)] shadow-[var(--shadow-overlay)] transition-transform duration-300 ease-out data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full",
+                shaking && "animate-drawer-shake",
+                className
+              ),
+              "data-state": open && entered ? "open" : "closed",
+              style: { width, ...style },
+              onAnimationEnd: (event) => {
+                if (event.animationName === "drawer-shake") setShaking(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] bg-[var(--cmp-overlay-header-bg)] px-[var(--cmp-overlay-header-paddingX)] py-[var(--cmp-overlay-header-paddingY)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 whitespace-nowrap text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SGhostButton,
+                    {
+                      icon: "close",
+                      ariaLabel: "\uB2EB\uAE30",
+                      onClick: () => {
+                        onClose?.();
+                        onOpenChange?.(false);
+                      },
+                      className: "absolute right-[12px] top-[12px]"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-drawer-body-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children }) }) }),
+                (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] bg-[var(--cmp-overlay-footer-bg-default)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)] shadow-[var(--shadow-overlay)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center justify-between", children: footerLeft }),
+                  button && /* @__PURE__ */ jsxRuntime.jsx(
+                    SButton,
+                    {
+                      color: button.color ?? "primary",
+                      outline: button.outline,
+                      size: button.size ?? "md",
+                      disabled: button.disabled,
+                      onClick: () => button.onClick?.(),
+                      label: button.label ?? "\uD655\uC778"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: setPortalContainer,
+              className: "pointer-events-auto fixed left-0 top-0",
+              style: { zIndex: 2 }
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) });
+}
 var EXIT_DURATION = 300;
 var EXIT_BUFFER = 100;
 var SModalRefImpl = class {
@@ -6961,6 +7126,10 @@ 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;
+var GNB_TOP_ICON_SIZE = 24;
+var GNB_FULL_LOGO_WIDTH_NO_LAUNCHER = GNB_FULL_LOGO_WIDTH + GNB_TOP_ICON_SIZE + GNB_TOP_ICON_GAP;
 function findGnbRailValue(items, value) {
   if (items.some((item) => item.value === value)) return value;
   return findGnbAncestors(items, value)[0];
@@ -7065,6 +7234,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
+  topContent,
   railFooter,
   menuFooter,
   foldedFooter,
@@ -7296,13 +7466,71 @@ var SGnb = /* @__PURE__ */ react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex shrink-0 items-center",
+      style: {
+        height: H.logoHeight,
+        ...header === "full" ? (
+          // full 은 전폭이라 로고 자리가 고정이다 — 폭 140px(디자인 스펙, 전용 토큰 없음)로 못 박아
+          // 로고 내용이 바뀌어도 오른쪽 topContent 시작점이 흔들리지 않게 한다.
+          // 런처가 없으면 그 자리(버튼 + 간격)를 로고가 이어받아, 런처 유무로 topContent 가 밀리지 않는다.
+          {
+            width: launcherButton ? GNB_FULL_LOGO_WIDTH : GNB_FULL_LOGO_WIDTH_NO_LAUNCHER,
+            marginLeft: H.topGap
+          }
+        ) : (
+          // fix 는 폴드가 ml-auto 로 밀려나므로(margin-left 를 못 쓴다) 로고 오른쪽에 최소 간격을 둔다
+          { marginRight: H.topGap }
+        ),
+        ...sideFoldStyle
+      },
+      children: logo
+    },
+    "logo"
+  ) : null;
+  const topContentBox = header === "full" && topContent ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex min-w-0 flex-1 items-center",
+      style: { marginLeft: H.topGap },
+      children: topContent
+    },
+    "topContent"
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7320,8 +7548,9 @@ var SGnb = /* @__PURE__ */ react.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,
@@ -7330,90 +7559,16 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
               // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
               color: C.itemColorDefault
             },
-            children: foldInline ? (
-              // 런처(있을 때)·폴드·로고를 흐름에 나란히 둔다 → 폴드 버튼이 (런처와) 로고 사이에 선다.
-              // 접히면 런처·로고가 페이드하며 흐름에서 빠지고(sideFoldStyle), 폴드 버튼만 남아 레일 가운데에 선다.
-              /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                onLauncherClick && /* @__PURE__ */ jsxRuntime.jsx(
-                  SGhostButton,
-                  {
-                    icon: "launcher",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "app launcher",
-                    onClick: onLauncherClick,
-                    className: "shrink-0",
-                    style: { ...sideFoldStyle, marginRight: "8px" }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SGhostButton,
-                  {
-                    icon: "sidebar",
-                    size: "xs",
-                    intent: color === "dark" ? "inverse" : "default",
-                    ariaLabel: "toggle navigation",
-                    ariaPressed: folded,
-                    onClick: handleFoldToggle,
-                    className: "shrink-0"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "flex shrink-0 items-center",
-                    style: { height: H.logoHeight, marginLeft: H.topGap, ...sideFoldStyle },
-                    children: logo
-                  }
-                )
-              ] })
-            ) : (
-              // 런처·로고는 좌측 그룹(흐름에서 빼 폭 축소 중 폴드 버튼을 밀어내지 않는다),
-              // 폴드 버튼은 우측 끝(ml-auto)이라 폭·패딩이 줄면 저절로 레일 가운데에 선다.
-              /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                (onLauncherClick || logo) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                        SGhostButton,
-                        {
-                          icon: "launcher",
-                          size: "xs",
-                          intent: color === "dark" ? "inverse" : "default",
-                          ariaLabel: "app launcher",
-                          onClick: onLauncherClick,
-                          className: "shrink-0"
-                        }
-                      ),
-                      logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              launcherButton,
+              logoBox,
+              foldButton
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              launcherButton,
+              foldButton,
+              logoBox,
+              topContentBox
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7907,10 +8062,10 @@ function SStepper({
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1.6", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1.6", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "currentColor" })
                       ]
                     }
                   )
@@ -8060,7 +8215,7 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
                 STooltip2,
                 {
                   message: labelTooltip !== "" ? [labelTooltip] : void 0,
@@ -12305,7 +12460,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                     "span",
                     {
                       className: "s-chip-input__divider shrink-0",
-                      style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
+                      style: { width: 1, height: 12, backgroundColor: "var(--color-divider-default)" }
                     }
                   ),
                   showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12367,7 +12522,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             role: "option",
                             "aria-selected": selected || active,
                             className: "rounded-full",
-                            style: active ? { outline: "2px solid #0075FF", outlineOffset: 1 } : void 0,
+                            style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
                               e.preventDefault();
                               if (!selected) addChip(item);
@@ -13470,6 +13625,7 @@ exports.COLOR_KEYS = COLOR_KEYS;
 exports.GNB_COLORS = GNB_COLORS;
 exports.GNB_COMMON = GNB_COMMON;
 exports.GNB_FOLD_MS = GNB_FOLD_MS;
+exports.GNB_FULL_LOGO_WIDTH = GNB_FULL_LOGO_WIDTH;
 exports.GNB_HEADER = GNB_HEADER;
 exports.GNB_MENU = GNB_MENU;
 exports.GNB_MENU_WIDTH = GNB_MENU_WIDTH;
@@ -13497,6 +13653,7 @@ exports.SDraggableGroup = SDraggableGroup;
 exports.SDraggableItem = SDraggableItem2;
 exports.SDraggableList = SDraggableList;
 exports.SDraggableProvider = SDraggableProvider;
+exports.SDrawer = SDrawer;
 exports.SDropdownButton = SDropdownButton2;
 exports.SExpansionItem = SExpansionItem;
 exports.SExpansionList = SExpansionList2;