sellmate-design-system-react 4.2.0 → 4.3.0

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export * from './components/SGuide';
 export * from './components/SConfirmModal';
 export * from './components/SActionModal';
 export * from './components/SLoadingModal';
+export * from './components/SDrawer';
 export * from './components/SModal';
 export * from './components/SGnb';
 export * from './components/SLayout';

package/dist/index.js

@@ -3617,9 +3617,10 @@ var SExpansionItem = /* @__PURE__ */ 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,
@@ -6571,6 +6572,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] = useState(false);
+  const [rendered, setRendered] = useState(() => Boolean(open));
+  const [entered, setEntered] = useState(false);
+  const [portalContainer, setPortalContainer] = useState(null);
+  const backdropPointerDownRef = useRef(false);
+  const contentRef = useRef(null);
+  const stackRegistrationRef = useRef(null);
+  const [layerIndex, setLayerIndex] = useState(null);
+  useEffect(() => {
+    if (open) {
+      setRendered(true);
+      return;
+    }
+    if (!rendered) return;
+    const timer = window.setTimeout(() => setRendered(false), CLOSE_ANIMATION_DURATION2);
+    return () => window.clearTimeout(timer);
+  }, [open, rendered]);
+  useEffect(() => {
+    if (!open) {
+      setEntered(false);
+      return;
+    }
+    setEntered(false);
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  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 = 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__ */ jsx(RDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx(RDialog.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
+    /* @__PURE__ */ jsx(
+      RDialog.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__ */ jsxs(
+      RDialog.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__ */ jsx(RDialog.Title, { className: "sr-only", children: title || "Drawer" }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("h2", { className: "m-0 whitespace-nowrap text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: title }),
+                  /* @__PURE__ */ jsx(
+                    SGhostButton,
+                    {
+                      icon: "close",
+                      ariaLabel: "\uB2EB\uAE30",
+                      onClick: () => {
+                        onClose?.();
+                        onOpenChange?.(false);
+                      },
+                      className: "absolute right-[12px] top-[12px]"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-drawer-body-border)]", children: /* @__PURE__ */ jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children }) }) }),
+                (button || footerLeft) && /* @__PURE__ */ 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__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-between", children: footerLeft }),
+                  button && /* @__PURE__ */ 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__ */ 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 {
@@ -6935,6 +7100,8 @@ 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];
@@ -7312,7 +7479,11 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
         ...header === "full" ? (
           // full 은 전폭이라 로고 자리가 고정이다 — 폭 140px(디자인 스펙, 전용 토큰 없음)로 못 박아
           // 로고 내용이 바뀌어도 오른쪽 topContent 시작점이 흔들리지 않게 한다.
-          { width: GNB_FULL_LOGO_WIDTH, marginLeft: H.topGap }
+          // 런처가 없으면 그 자리(버튼 + 간격)를 로고가 이어받아, 런처 유무로 topContent 가 밀리지 않는다.
+          {
+            width: launcherButton ? GNB_FULL_LOGO_WIDTH : GNB_FULL_LOGO_WIDTH_NO_LAUNCHER,
+            marginLeft: H.topGap
+          }
         ) : (
           // fix 는 폴드가 ml-auto 로 밀려나므로(margin-left 를 못 쓴다) 로고 오른쪽에 최소 간격을 둔다
           { marginRight: H.topGap }
@@ -7863,10 +8034,10 @@ function SStepper({
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
                       children: [
-                        /* @__PURE__ */ jsx("rect", { width: "1.6", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsx("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }),
-                        /* @__PURE__ */ jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })
+                        /* @__PURE__ */ jsx("rect", { width: "1.6", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsx("rect", { x: "5", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsx("rect", { x: "11.7", width: "3.3", height: "1", fill: "currentColor" }),
+                        /* @__PURE__ */ jsx("rect", { x: "18.4", width: "1.6", height: "1", fill: "currentColor" })
                       ]
                     }
                   )
@@ -8016,7 +8187,7 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
-              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
+              (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
                 STooltip2,
                 {
                   message: labelTooltip !== "" ? [labelTooltip] : void 0,
@@ -12261,7 +12432,7 @@ var SChipInput = /* @__PURE__ */ 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__ */ jsxs(
@@ -12323,7 +12494,7 @@ var SChipInput = /* @__PURE__ */ 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);
@@ -13419,6 +13590,6 @@ function STimeRangePicker({
   );
 }
 
-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 };
+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, SDrawer, 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