sellmate-design-system-react 8.0.0 → 8.1.0

package/dist/index.js

@@ -3163,6 +3163,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
     bordered,
     selected,
     dense,
+    size,
     dragging,
     disabled,
     hovered,
@@ -3176,6 +3177,8 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
     const supportingTextNode = renderSlot(supportingText, renderState);
     const hasSupportingText = supportingTextNode != null && supportingTextNode !== "";
     const trailingNode = renderSlot(trailing, renderState);
+    const titleTypo = size === "sm" ? selected ? "typo-item-sm-selected" : "typo-item-sm-default" : selected ? "typo-item-md-selected" : "typo-item-md-default";
+    const paddingYClass = dense ? size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-dense)" : "py-(--cmp-listDraggableItem-paddingY-md-dense)" : size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-normal)" : "py-(--cmp-listDraggableItem-paddingY-md-normal)";
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3183,10 +3186,12 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
         "aria-disabled": disabled || void 0,
         "data-dragging": dragging || void 0,
         className: cn(
-          "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX) text-[12px] leading-[20px]",
-          disabled ? "bg-(--cmp-listDraggableItem-bg-default) font-medium text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) font-bold text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) font-medium text-(--cmp-listDraggableItem-text-default)",
+          "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX)",
+          titleTypo,
+          disabled ? "bg-(--cmp-listDraggableItem-bg-default) text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) text-(--cmp-listDraggableItem-text-default)",
           !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
-          hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px] py-(--cmp-listDraggableItem-paddingY-dense)" : "min-h-[60px] py-(--cmp-listDraggableItem-paddingY-normal)" : dense ? "h-[32px] py-(--cmp-listDraggableItem-paddingY-dense)" : "h-[40px] py-(--cmp-listDraggableItem-paddingY-normal)",
+          hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px]" : "min-h-[60px]" : dense ? "h-[32px]" : "h-[40px]",
+          paddingYClass,
           bordered ? cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
@@ -3244,7 +3249,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
                         "span",
                         {
                           className: cn(
-                            "min-w-0 truncate text-[12px] font-normal leading-[20px] text-(--sys-color-fg-secondary)",
+                            "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
                             supportingTextPosition === "right" && "flex-1"
                           ),
                           children: supportingTextNode
@@ -3272,6 +3277,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
   selected = false,
   dragging = false,
   dense = false,
+  size = "sm",
   disabled = false,
   dragOverlay = true,
   dragOverlayOpacity = 0.75,
@@ -3343,6 +3349,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
         bordered,
         selected,
         dense,
+        size,
         dragging: dragging || overlayVisible,
         disabled,
         hovered,
@@ -3377,6 +3384,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
               bordered,
               selected,
               dense,
+              size,
               dragging: true,
               disabled,
               hovered: true,
@@ -3728,6 +3736,7 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
     interaction,
     accentStripe = false,
     dense = false,
+    size = "sm",
     disabled = false,
     onToggle,
     className,
@@ -3743,6 +3752,7 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
     const hasChevronInteraction = interaction === "chevron";
     const showInteractionChevron = hasChevronInteraction && !disabled && (isSelected || hovered);
     const interactionChevronColor = isSelected ? "var(--sys-color-fg-brand)" : "var(--sys-color-fg-quaternary)";
+    const titleTypo = size === "sm" ? isExpanded ? "typo-item-sm-selected" : "typo-item-sm-default" : isExpanded ? "typo-item-md-selected" : "typo-item-md-default";
     const reportExpandedDescendant = useCallback(
       (delta) => {
         setExpandedDescendantCount((current) => Math.max(0, current + delta));
@@ -3800,7 +3810,8 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
                 onToggle?.(next, event);
               },
               className: cn(
-                "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
+                "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
+                titleTypo,
                 isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
                 hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
                 hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "min-h-[60px] py-(--cmp-listExpansionItem-title-paddingY-normal)" : dense ? "h-[32px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "h-[40px] py-(--cmp-listExpansionItem-title-paddingY-normal)",
@@ -3837,7 +3848,7 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
                         "span",
                         {
                           className: cn(
-                            "min-w-0 truncate text-[12px] font-normal leading-[20px] text-(--sys-color-fg-secondary)",
+                            "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
                             supportingTextPosition === "right" && "flex-1"
                           ),
                           children: supportingText
@@ -3881,6 +3892,7 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
   interaction,
   accentStripe = false,
   dense = false,
+  size = "sm",
   disabled = false,
   className,
   onMouseEnter,
@@ -3899,6 +3911,7 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
   const hasChevronInteraction = interaction === "chevron";
   const showInteractionChevron = hasChevronInteraction && isInteractive && (isSelected || hovered);
   const interactionChevronColor = isSelected ? "var(--sys-color-fg-brand)" : "var(--sys-color-fg-quaternary)";
+  const titleTypo = size === "sm" ? isSelected ? "typo-item-sm-selected" : "typo-item-sm-default" : isSelected ? "typo-item-md-selected" : "typo-item-md-default";
   const handleMouseEnter = (event) => {
     if (isInteractive) setHovered(true);
     onMouseEnter?.(event);
@@ -3915,7 +3928,8 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       className: cn(
-        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
+        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-(--cmp-listItem-text-default)",
+        titleTypo,
         disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : isSelected ? cn(
           "cursor-pointer text-(--cmp-listItem-text-selected)",
           "bg-(--cmp-listItem-bg-selected)"
@@ -3956,7 +3970,7 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
                 "span",
                 {
                   className: cn(
-                    "min-w-0 truncate text-[12px] font-normal leading-[20px] text-(--sys-color-fg-secondary)",
+                    "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
                     supportingTextPosition === "right" && "flex-1"
                   ),
                   children: supportingTextNode
@@ -7029,6 +7043,8 @@ function SLoadingModal({
   );
 }
 var CLOSE_ANIMATION_DURATION2 = 300;
+var RESIZE_KEY_STEP = { normal: 10, large: 50 };
+var RESIZE_HIT_WIDTH = "calc(var(--cmp-splitter-border-width) + var(--cmp-splitter-border-padding) * 2)";
 function toPx(value, percentBase) {
   if (typeof value === "number") return value;
   if (typeof value !== "string") return void 0;
@@ -7066,6 +7082,7 @@ function SDrawer({
   resizable = false,
   minWidth,
   maxWidth,
+  onWidthChange,
   footerLeft,
   button,
   children,
@@ -7078,11 +7095,16 @@ function SDrawer({
   const [portalContainer, setPortalContainer] = useState(null);
   const backdropPointerDownRef = useRef(false);
   const contentRef = useRef(null);
+  const panelRef = useRef(null);
   const stackRegistrationRef = useRef(null);
   const resizeCleanupRef = useRef(null);
-  const resizeStateRef = useRef(null);
   const [layerIndex, setLayerIndex] = useState(null);
   const [currentWidth, setCurrentWidth] = useState(width);
+  const [resizing, setResizing] = useState(false);
+  const [measuredWidth, setMeasuredWidth] = useState(null);
+  const [viewportWidth, setViewportWidth] = useState(
+    () => typeof window === "undefined" ? void 0 : window.innerWidth
+  );
   useEffect(() => {
     setCurrentWidth(width);
   }, [width]);
@@ -7098,6 +7120,22 @@ function SDrawer({
   useEffect(() => {
     return () => resizeCleanupRef.current?.();
   }, []);
+  useEffect(() => {
+    if (!rendered) return;
+    const sync = () => setViewportWidth(window.innerWidth);
+    sync();
+    window.addEventListener("resize", sync);
+    return () => window.removeEventListener("resize", sync);
+  }, [rendered]);
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!resizable || !rendered || !panel || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(
+      () => setMeasuredWidth(Math.round(panel.getBoundingClientRect().width))
+    );
+    observer.observe(panel);
+    return () => observer.disconnect();
+  }, [resizable, rendered]);
   useEffect(() => {
     if (!open) {
       setEntered(false);
@@ -7139,41 +7177,80 @@ function SDrawer({
     }
     onOpenChange?.(false);
   };
+  const resizeBounds = () => {
+    const limit = viewportWidth;
+    if (limit === void 0) return { min: void 0, max: void 0 };
+    const min = toPx(minWidth, limit);
+    const max = toPx(maxWidth, limit);
+    return {
+      min: min === void 0 ? void 0 : Math.min(min, limit),
+      max: max === void 0 ? limit : Math.min(max, limit)
+    };
+  };
+  const commitWidth = (next, startWidth) => {
+    const { min, max } = resizeBounds();
+    const clamped = Math.round(clamp3(next, min, max));
+    setCurrentWidth(clamped);
+    if (clamped !== Math.round(startWidth)) onWidthChange?.(clamped);
+  };
   const handleResizeStart = (event) => {
+    if (typeof document === "undefined") return;
+    const panel = panelRef.current;
+    if (!panel) return;
     event.preventDefault();
     event.stopPropagation();
-    const panel = contentRef.current?.querySelector("[data-s-drawer-panel]");
-    if (!panel) return;
-    resizeStateRef.current = {
-      startX: event.clientX,
-      startWidth: panel.getBoundingClientRect().width,
-      minWidth: toPx(minWidth, window.innerWidth),
-      maxWidth: toPx(maxWidth, window.innerWidth)
-    };
+    event.currentTarget.focus();
+    const startX = event.clientX;
+    const startWidth = panel.getBoundingClientRect().width;
+    const { min, max } = resizeBounds();
+    let latest = startWidth;
+    const { body } = document;
+    const previousCursor = body.style.cursor;
+    const previousUserSelect = body.style.userSelect;
     const onMove = (moveEvent) => {
-      const resizeState = resizeStateRef.current;
-      if (!resizeState) return;
-      const nextWidth = resizeState.startWidth + resizeState.startX - moveEvent.clientX;
-      setCurrentWidth(clamp3(nextWidth, resizeState.minWidth, resizeState.maxWidth));
+      latest = Math.round(clamp3(startWidth + (startX - moveEvent.clientX), min, max));
+      setCurrentWidth(latest);
     };
-    resizeCleanupRef.current?.();
-    const previousCursor = document.body.style.cursor;
-    const previousUserSelect = document.body.style.userSelect;
     const cleanupResize = () => {
-      resizeStateRef.current = null;
-      document.body.style.cursor = previousCursor;
-      document.body.style.userSelect = previousUserSelect;
+      body.style.cursor = previousCursor;
+      body.style.userSelect = previousUserSelect;
       document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", cleanupResize);
       resizeCleanupRef.current = null;
+      setResizing(false);
+      commitWidth(latest, startWidth);
     };
+    resizeCleanupRef.current?.();
     resizeCleanupRef.current = cleanupResize;
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
+    body.style.cursor = "col-resize";
+    body.style.userSelect = "none";
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", cleanupResize);
+    setResizing(true);
+  };
+  const handleResizeKeyDown = (event) => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const startWidth = panel.getBoundingClientRect().width;
+    const { min, max } = resizeBounds();
+    const step = RESIZE_KEY_STEP[event.shiftKey ? "large" : "normal"];
+    let next = null;
+    if (event.key === "ArrowLeft") next = startWidth + step;
+    else if (event.key === "ArrowRight") next = startWidth - step;
+    else if (event.key === "Home" && min !== void 0) next = min;
+    else if (event.key === "End" && max !== void 0) next = max;
+    if (next === null) return;
+    event.preventDefault();
+    commitWidth(next, startWidth);
   };
   const modalHost = getModalHost();
+  const resizeValueNow = measuredWidth ?? (typeof currentWidth === "number" ? Math.round(currentWidth) : void 0);
+  const { min: resizeMinPx, max: resizeMaxPx } = resizeBounds();
+  const resizeValueMin = resizeMinPx === void 0 ? void 0 : Math.round(resizeMinPx);
+  const resizeValueMax = resizeMaxPx === void 0 ? void 0 : Math.round(resizeMaxPx);
+  const appliedWidth = typeof currentWidth === "number" && viewportWidth !== void 0 ? Math.min(currentWidth, viewportWidth) : currentWidth;
+  const appliedMinWidth = resizeMinPx ?? minWidth;
+  const appliedMaxWidth = resizeMaxPx ?? maxWidth;
   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,
@@ -7215,6 +7292,7 @@ function SDrawer({
           /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: panelRef,
               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",
@@ -7222,20 +7300,45 @@ function SDrawer({
               ),
               "data-s-drawer-panel": true,
               "data-state": open && entered ? "open" : "closed",
-              style: { width: currentWidth, minWidth, maxWidth, ...style },
+              style: {
+                width: appliedWidth,
+                minWidth: appliedMinWidth,
+                maxWidth: appliedMaxWidth,
+                ...style
+              },
               onAnimationEnd: (event) => {
                 if (event.animationName === "drawer-shake") setShaking(false);
               },
               children: [
-                resizable && /* @__PURE__ */ jsx(
-                  "button",
+                resizable && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    type: "button",
+                    role: "separator",
+                    "aria-orientation": "vertical",
                     "aria-label": "Drawer \uB108\uBE44 \uC870\uC808",
-                    className: "absolute inset-y-0 left-0 z-[1] w-[8px] -translate-x-1/2 cursor-col-resize touch-none border-0 bg-transparent p-0",
-                    onMouseDown: handleResizeStart
+                    "aria-valuenow": resizeValueNow,
+                    "aria-valuemin": resizeValueMin,
+                    "aria-valuemax": resizeValueMax,
+                    "aria-valuetext": resizeValueNow === void 0 ? void 0 : `${resizeValueNow}px`,
+                    tabIndex: 0,
+                    onMouseDown: handleResizeStart,
+                    onKeyDown: handleResizeKeyDown,
+                    className: "group absolute inset-y-0 left-0 z-[1] flex cursor-col-resize touch-none justify-start outline-none",
+                    style: { width: RESIZE_HIT_WIDTH },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          // 평상시엔 자리만 잡고 칠하지 않는다 — 색이 붙는 것 자체가 조절 가능하다는 신호다.
+                          "w-(--cmp-splitter-border-width) transition-colors",
+                          "group-hover:bg-(--cmp-splitter-border-color) group-focus-visible:bg-(--cmp-splitter-border-color)",
+                          resizing && "bg-(--cmp-splitter-border-color)"
+                        )
+                      }
+                    )
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsx(
                   SOverlayHeader,
                   {
@@ -7908,8 +8011,11 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
   onLauncherClick,
   logo,
   topContent,
+  railTop,
   railFooter,
+  menuTop,
   menuFooter,
+  foldedTop,
   foldedFooter,
   resizable = false,
   menuWidth: menuWidthProp,
@@ -8418,6 +8524,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
             ] })
           }
         ),
+        railFolded && foldedTop && /* @__PURE__ */ jsx("div", { className: "mt-[24px] flex shrink-0 items-center justify-center", children: foldedTop }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -8435,9 +8542,9 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                     transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
                   },
                   children: [
-                    useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
-                    // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
-                    // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
+                    useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)을 가운데 두고 위아래에 고정 슬롯(top/footer)을 붙인다.
+                    // 두 슬롯은 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
+                    // 전체 높이에 걸쳐 책임진다(그래야 슬롯 자리까지 배경·오른쪽 선이 이어진다).
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -8448,6 +8555,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                           backgroundColor: C.panelBg
                         },
                         children: [
+                          railTop && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: railTop }),
                           /* @__PURE__ */ jsx(
                             "nav",
                             {
@@ -8475,6 +8583,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                           borderRight: isFull ? rightBorder : void 0
                         },
                         children: [
+                          menuTop && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: menuTop }),
                           /* @__PURE__ */ jsx(
                             "nav",
                             {