sellmate-design-system-react 0.5.0 → 0.6.1

package/dist/index.js

@@ -5041,15 +5041,30 @@ var SLayout = forwardRef(function SLayout2({
     },
     [isControlled, onFoldedChange]
   );
+  const [gnbState, setGnbState] = useState({ forceFull: false, menuVisible: true });
+  const reportGnbState = useCallback(
+    (next) => setGnbState(
+      (prev) => prev.forceFull === next.forceFull && prev.menuVisible === next.menuVisible ? prev : next
+    ),
+    []
+  );
+  const effectiveHeader = header === "full" || gnbState.forceFull ? "full" : "fix";
   const ctx = useMemo(
-    () => ({ type, header, useRail, folded: currentFolded, setFolded }),
-    [type, header, useRail, currentFolded, setFolded]
+    () => ({
+      type,
+      header: effectiveHeader,
+      useRail,
+      folded: currentFolded,
+      setFolded,
+      reportGnbState
+    }),
+    [type, effectiveHeader, useRail, currentFolded, setFolded, reportGnbState]
   );
-  const isFullHeader = header === "full";
-  const gnbColumnWidth = useRail ? GNB_RAIL_WIDTH + GNB_MENU_WIDTH : GNB_MENU_WIDTH;
+  const isFullHeader = effectiveHeader === "full";
+  const gnbColumnWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (gnbState.menuVisible ? GNB_MENU_WIDTH : 0);
   const frameStyle = isFullHeader ? {
     gridTemplateColumns: `${currentFolded ? 0 : gnbColumnWidth}px 1fr`,
-    gridTemplateRows: `${GNB_HEADER[header].topHeight} 1fr`,
+    gridTemplateRows: `${GNB_HEADER[effectiveHeader].topHeight} 1fr`,
     // 메뉴가 미끄러지는 동안 페이지 열도 같은 길이로 따라와야 한 덩어리로 읽힌다.
     // (fix 는 SGnb 가 제 폭을 직접 전환하므로 프레임이 손댈 게 없다)
     transition: `grid-template-columns ${GNB_FOLD_MS}ms ease-out`
@@ -5059,7 +5074,7 @@ var SLayout = forwardRef(function SLayout2({
     {
       ref,
       "data-type": type,
-      "data-header": header,
+      "data-header": effectiveHeader,
       className: cn(
         "box-border h-full overflow-hidden",
         isFullHeader ? "grid" : "flex flex-row",
@@ -5092,9 +5107,10 @@ var SGnb = forwardRef(function SGnb2({
 }, ref) {
   const layout = useContext(SLayoutContext);
   const type = typeProp ?? layout?.type ?? "box";
-  const header = headerProp ?? layout?.header ?? "fix";
   const folded = foldedProp ?? layout?.folded ?? false;
   const useRail = useRailProp ?? layout?.useRail ?? false;
+  const railHasLeaf = useRail && items.some((item) => !item.children || item.children.length === 0);
+  const header = railHasLeaf ? "full" : headerProp ?? layout?.header ?? "fix";
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
   const C = GNB_COLORS[color];
@@ -5228,9 +5244,24 @@ var SGnb = forwardRef(function SGnb2({
             onMouseEnter: () => setHoveredKey(item.value),
             onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
             children: [
-              depth === 1 && item.icon && /* @__PURE__ */ jsx(SIcon, { name: item.icon, size: M.depth1Icon, color: C.itemIcon, className: "shrink-0" }),
+              depth === 1 && item.icon && /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: item.icon,
+                  size: M.depth1Icon,
+                  color: isSelected ? C.itemColorActive : C.itemIcon,
+                  className: "shrink-0"
+                }
+              ),
               /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex flex-no-wrap items-center", children: [
-                depth > 1 && iconBranch ? /* @__PURE__ */ jsx("div", { className: "w-[20px] h-[24px] flex items-center justify-center mr-[8px]", children: "-" }) : null,
+                depth > 1 && iconBranch ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-[20px] flex items-center justify-center mr-[8px]",
+                    style: { height: M.itemLineHeight },
+                    children: "-"
+                  }
+                ) : null,
                 item.label
               ] }),
               item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsx(
@@ -5282,16 +5313,28 @@ var SGnb = forwardRef(function SGnb2({
   };
   const railItems = useRail ? items : [];
   const menuItems = useRail ? items.find((item) => item.value === activeRail)?.children ?? [] : items;
-  const bodyWidth = useRail ? GNB_RAIL_WIDTH + GNB_MENU_WIDTH : GNB_MENU_WIDTH;
+  const showMenu = !useRail || menuItems.length > 0;
+  const bodyWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? GNB_MENU_WIDTH : 0);
+  useEffect(() => {
+    layout?.reportGnbState({ forceFull: railHasLeaf, menuVisible: showMenu });
+  }, [layout, railHasLeaf, showMenu]);
   const railFolded = folded && header === "fix";
   const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : bodyWidth;
+  const rightBorder = color === "light" ? `1px solid ${C.topBorder}` : void 0;
   const rootStyle = {
     width: rootWidth,
     transition: `width ${GNB_FOLD_MS}ms ease-out`,
-    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg, borderRight: rightBorder },
     ...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)}`
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5303,12 +5346,14 @@ var SGnb = forwardRef(function SGnb2({
       "data-color": color,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             className: "relative box-border flex shrink-0 items-center overflow-hidden",
             style: {
               height: H.topHeight,
+              // 인라인 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 런처↔폴드(8px)와
+              // 폴드↔로고(top-gap)를 다르게 두기 위함. 접히면 런처·로고가 흐름에서 빠져 margin 도 무의미해진다.
               padding: `0 ${railFolded ? GNB_RAIL.padding : H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
@@ -5317,49 +5362,90 @@ var SGnb = forwardRef(function SGnb2({
               // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
               color: C.itemColorDefault
             },
-            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: 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"
+                  }
+                )
+              ] })
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -5395,7 +5481,7 @@ var SGnb = forwardRef(function SGnb2({
                   children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
                 }
               ),
-              /* @__PURE__ */ jsx(
+              showMenu && /* @__PURE__ */ jsx(
                 "nav",
                 {
                   "aria-label": ariaLabel,
@@ -5405,6 +5491,8 @@ var SGnb = forwardRef(function SGnb2({
                     paddingTop: M.bodyPaddingY,
                     paddingBottom: M.bodyPaddingY,
                     backgroundColor: C.panelBg,
+                    // full 은 상단바가 전폭이라 루트가 오른쪽 선을 못 그린다 → 메뉴 오른쪽(페이지 경계)이 대신 그린다.
+                    borderRight: header === "full" ? rightBorder : void 0,
                     pointerEvents: "auto"
                   },
                   children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
@@ -5661,6 +5749,169 @@ function SPagination({
     }
   );
 }
+
+// src/components/SStepper/stepper.config.ts
+var STEPPER_SIZES = ["sm", "lg"];
+var V2 = (path) => `var(--cmp-stepper-${path})`;
+var STEPPER_SIZE_CONFIG = {
+  sm: {
+    sequenceSize: V2("sm-sequence-size"),
+    fontSize: "12px",
+    lineHeight: "20px",
+    fontWeightActive: 700,
+    fontWeightDefault: 500
+  },
+  lg: {
+    sequenceSize: V2("lg-sequence-size"),
+    fontSize: "14px",
+    lineHeight: "24px",
+    fontWeightActive: 700,
+    fontWeightDefault: 500
+  }
+};
+var STEPPER_LAYOUT = {
+  containerGap: V2("container-gap"),
+  itemGap: V2("item-gap"),
+  dashWidth: V2("dash-width"),
+  sequenceRadius: V2("sequence-radius"),
+  sequenceBorderWidth: V2("sequence-border-witdh"),
+  sequenceIcon: V2("sequence-icon")
+};
+var STEPPER_COLORS = {
+  dash: V2("dash-color"),
+  sequenceBorder: {
+    active: V2("sequence-border-active"),
+    default: V2("sequence-border-default"),
+    completed: V2("sequence-border-completed")
+  },
+  sequenceBg: {
+    active: V2("sequence-bg-active"),
+    default: V2("sequence-bg-default"),
+    completed: V2("sequence-bg-completed")
+  },
+  sequenceText: {
+    active: V2("sequence-text-active"),
+    default: V2("sequence-text-default")
+  },
+  text: {
+    active: V2("text-active"),
+    default: V2("text-default")
+  }
+};
+function getItemValue(item, index) {
+  return item.value ?? String(index + 1);
+}
+function SStepper({
+  items,
+  value,
+  size = "sm",
+  ariaLabel = "\uC9C4\uD589 \uB2E8\uACC4",
+  className,
+  style
+}) {
+  const config = STEPPER_SIZE_CONFIG[size];
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item, index) => getItemValue(item, index) === value)
+  );
+  const getState = (index) => {
+    if (index < activeIndex) return "completed";
+    if (index === activeIndex) return "active";
+    return "default";
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex items-center", className),
+      style: {
+        gap: STEPPER_LAYOUT.containerGap,
+        fontSize: config.fontSize,
+        lineHeight: config.lineHeight,
+        ...style
+      },
+      children: items.map((item, index) => {
+        const state2 = getState(index);
+        const itemStyle = {
+          gap: STEPPER_LAYOUT.itemGap,
+          color: state2 === "active" ? STEPPER_COLORS.text.active : STEPPER_COLORS.text.default,
+          fontWeight: state2 === "active" ? config.fontWeightActive : config.fontWeightDefault
+        };
+        const sequenceStyle = {
+          width: config.sequenceSize,
+          height: config.sequenceSize,
+          flexBasis: config.sequenceSize,
+          borderRadius: STEPPER_LAYOUT.sequenceRadius,
+          borderWidth: STEPPER_LAYOUT.sequenceBorderWidth,
+          borderColor: STEPPER_COLORS.sequenceBorder[state2],
+          background: STEPPER_COLORS.sequenceBg[state2],
+          color: state2 === "completed" ? STEPPER_COLORS.text.default : STEPPER_COLORS.sequenceText[state2]
+        };
+        const content = /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "listitem",
+            "aria-current": state2 === "active" ? "step" : void 0,
+            className: "inline-flex items-center whitespace-nowrap",
+            style: itemStyle,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "box-border inline-flex shrink-0 items-center justify-center border border-solid font-bold",
+                  style: sequenceStyle,
+                  children: state2 === "completed" ? /* @__PURE__ */ jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          }
+        );
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center",
+            style: { gap: STEPPER_LAYOUT.containerGap },
+            children: [
+              content,
+              index < items.length - 1 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "inline-flex h-px shrink-0 items-center",
+                  style: { width: STEPPER_LAYOUT.dashWidth, color: STEPPER_COLORS.dash },
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "1",
+                      viewBox: "0 0 20 1",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          y1: "0.5",
+                          x2: "20",
+                          y2: "0.5",
+                          stroke: "#888888",
+                          strokeDasharray: "4 4"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          getItemValue(item, index)
+        );
+      })
+    }
+  );
+}
 function SCheckbox({
   value = false,
   val,
@@ -8060,25 +8311,45 @@ function SDatePicker({
     }
   );
 }
+function splitDateTime(v) {
+  if (!v) return { date: null, hour: "00", minute: "00" };
+  const [date = "", time = ""] = v.split(" ");
+  const [hour = "00", minute = "00"] = time.split(":");
+  return { date: date || null, hour, minute };
+}
 function RangeCalendar({
   value,
   selectable,
   maxRange,
+  useTimePicker = false,
   onSelect,
   onPendingStartChange,
   onViewChange
 }) {
   const today = todayStr();
-  const base = value?.[0] || today;
+  const initial = splitDateTime(value?.[0]);
+  const base = initial.date || today;
   const [y, setY] = useState(Number(base.split("-")[0]));
   const [m, setM] = useState(Number(base.split("-")[1]));
-  const [start, setStart] = useState(value?.[0] ?? null);
-  const [end, setEnd] = useState(value?.[1] ?? null);
+  const [start, setStart] = useState(initial.date);
+  const [end, setEnd] = useState(splitDateTime(value?.[1]).date);
   const [hover, setHover] = useState(null);
+  const [sH, setSH] = useState(initial.hour);
+  const [sM, setSM] = useState(initial.minute);
+  const [eH, setEH] = useState(splitDateTime(value?.[1]).hour);
+  const [eM, setEM] = useState(splitDateTime(value?.[1]).minute);
+  const lastEmitted = useRef("");
   useEffect(() => {
-    setStart(value?.[0] ?? null);
-    setEnd(value?.[1] ?? null);
-  }, [value]);
+    if (useTimePicker && JSON.stringify(value) === lastEmitted.current) return;
+    const s = splitDateTime(value?.[0]);
+    const e = splitDateTime(value?.[1]);
+    setStart(s.date);
+    setEnd(e.date);
+    setSH(s.hour);
+    setSM(s.minute);
+    setEH(e.hour);
+    setEM(e.minute);
+  }, [value, useTimePicker]);
   const setBase = (ny, nm) => {
     setY(ny);
     setM(nm);
@@ -8122,18 +8393,53 @@ function RangeCalendar({
   const hasRange = !!(rStart && rEnd && rStart !== rEnd);
   const inRange = (d) => !!(rStart && rEnd && d > rStart && d < rEnd);
   const RANGE_BG = "var(--cmp-datepicker-calendar-range-bg)";
+  const pad = (v) => String(Number(v) || 0).padStart(2, "0");
+  const emit2 = (dateStart, dateEnd, time) => {
+    const t = time ?? { sH, sM, eH, eM };
+    const range = useTimePicker ? [`${dateStart} ${pad(t.sH)}:${pad(t.sM)}`, `${dateEnd} ${pad(t.eH)}:${pad(t.eM)}`] : [dateStart, dateEnd];
+    lastEmitted.current = JSON.stringify(range);
+    onSelect(range);
+  };
   const click = (d) => {
     if (isDisabled(d)) return;
     if (!start || complete || d < start) {
       setStart(d);
       setEnd(null);
       setHover(null);
+      if (useTimePicker) {
+        setSH("00");
+        setSM("00");
+        setEH("23");
+        setEM("59");
+      }
       onPendingStartChange?.(d);
       return;
     }
     setEnd(d);
     onPendingStartChange?.(null);
-    onSelect([start, d]);
+    emit2(start, d, useTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
+  };
+  const changeTime = (which, part, raw) => {
+    const digits = raw.replace(/\D/g, "").slice(0, 2);
+    const max = part === "h" ? 23 : 59;
+    const next = digits !== "" && Number(digits) > max ? String(max) : digits;
+    const nextTime = { sH, sM, eH, eM };
+    if (which === "start") nextTime[part === "h" ? "sH" : "sM"] = next;
+    else nextTime[part === "h" ? "eH" : "eM"] = next;
+    setSH(nextTime.sH);
+    setSM(nextTime.sM);
+    setEH(nextTime.eH);
+    setEM(nextTime.eM);
+    if (start && end) emit2(start, end, nextTime);
+  };
+  const blurTime = (which, part) => {
+    if (which === "start") {
+      if (part === "h") setSH(pad(sH));
+      else setSM(pad(sM));
+    } else {
+      if (part === "h") setEH(pad(eH));
+      else setEM(pad(eM));
+    }
   };
   const GRID_COLS = "grid grid-cols-[repeat(7,var(--cmp-datepicker-calendar-day-width))]";
   const renderPanel = (gy, gm, isLeft) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
@@ -8208,35 +8514,120 @@ function RangeCalendar({
       );
     }) })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: "inline-flex h-[364px] flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none", children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
-        /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
-        /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
-        /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: goToday,
-          className: "absolute right-0 h-[24px] min-w-[37px] cursor-pointer bg-transparent text-center text-[12px] font-medium leading-[24px] text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:underline",
-          children: "\uC624\uB298"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
-      renderPanel(y, m, true),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
-          "aria-hidden": true
-        }
+  const renderTimeSection = (which, date, suffix) => {
+    const active = !!date;
+    const [yy = "", mm = "", dd = ""] = date ? date.split("-") : [];
+    const hour = which === "start" ? sH : eH;
+    const minute = which === "start" ? sM : eM;
+    const num = (n, strip) => active && n !== "" ? strip ? String(Number(n)) : n : "-";
+    const INPUT_CLS = "h-[var(--cmp-datepicker-sm-height)] w-[40px] rounded-[var(--cmp-datepicker-sm-radius)] border border-solid border-[color:var(--cmp-datepicker-border-default)] bg-[var(--cmp-datepicker-bg-default)] text-center text-[12px] font-medium leading-[20px] text-[color:var(--cmp-datepicker-text-default)] outline-none placeholder:text-[color:var(--cmp-datepicker-text-disabled)] focus:border-[color:var(--cmp-datepicker-border-focus)] disabled:cursor-not-allowed";
+    const LABEL = "text-[color:var(--cmp-datepicker-calendar-time-date-label)]";
+    const UNIT = "text-[color:var(--cmp-datepicker-calendar-time-date-unit)]";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-1 items-center justify-center gap-[var(--cmp-datepicker-calendar-time-section-gap)] rounded-[var(--cmp-datepicker-calendar-time-radius)] px-[var(--cmp-datepicker-calendar-time-paddingX)] py-[var(--cmp-datepicker-calendar-time-paddingY)] text-[12px] font-medium leading-[20px]",
+          active ? "bg-[var(--cmp-datepicker-calendar-time-bg-selected)]" : "bg-[var(--cmp-datepicker-calendar-time-bg-default)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-time-date-gap)]", children: [
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: num(yy, false) }),
+            /* @__PURE__ */ jsx("span", { className: UNIT, children: "\uB144" }),
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: num(mm, true) }),
+            /* @__PURE__ */ jsx("span", { className: UNIT, children: "\uC6D4" }),
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: num(dd, true) }),
+            /* @__PURE__ */ jsx("span", { className: UNIT, children: "\uC77C" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-time-unit-gap)]", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 2,
+                "aria-label": `${suffix} \uC2DC`,
+                disabled: !active,
+                value: active ? hour : "",
+                placeholder: "--",
+                onChange: (e) => changeTime(which, "h", e.target.value),
+                onBlur: () => blurTime(which, "h"),
+                className: INPUT_CLS
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: ":" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 2,
+                "aria-label": `${suffix} \uBD84`,
+                disabled: !active,
+                value: active ? minute : "",
+                placeholder: "--",
+                onChange: (e) => changeTime(which, "m", e.target.value),
+                onBlur: () => blurTime(which, "m"),
+                className: INPUT_CLS
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: UNIT, children: suffix })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
+        useTimePicker ? "h-auto" : "h-[364px]"
       ),
-      renderPanel(nextMonthYM.year, nextMonthYM.month, false)
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
+            /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
+            /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: goToday,
+              className: "absolute right-0 h-[24px] min-w-[37px] cursor-pointer bg-transparent text-center text-[12px] font-medium leading-[24px] text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:underline",
+              children: "\uC624\uB298"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
+          renderPanel(y, m, true),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
+              "aria-hidden": true
+            }
+          ),
+          renderPanel(nextMonthYM.year, nextMonthYM.month, false)
+        ] }),
+        useTimePicker && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-range-divider)]",
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
+            renderTimeSection("start", start, "\uBD80\uD130"),
+            renderTimeSection("end", end, "\uAE4C\uC9C0")
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function SDateRangePicker({
   value,
@@ -8246,6 +8637,7 @@ function SDateRangePicker({
   placeholder = "YYYY-MM-DD ~ YYYY-MM-DD",
   selectable,
   maxRange,
+  useTimePicker = false,
   disabled = false,
   width,
   name,
@@ -8289,8 +8681,9 @@ function SDateRangePicker({
     setPendingStart(null);
     onValueChange?.(r);
     if (rules && rules.length > 0) setRuleError(runRules(r, rules));
-    setOpen(false);
+    if (!useTimePicker) setOpen(false);
   };
+  const resolvedPlaceholder = useTimePicker && placeholder === "YYYY-MM-DD ~ YYYY-MM-DD" ? "YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm" : placeholder;
   return /* @__PURE__ */ jsx(
     SField,
     {
@@ -8357,7 +8750,7 @@ function SDateRangePicker({
                         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-right", children: startText }),
                         /* @__PURE__ */ jsx("span", { className: "px-[4px]", children: "~" }),
                         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: endText })
-                      ] }) : placeholder
+                      ] }) : resolvedPlaceholder
                     }
                   )
                 ]
@@ -8376,6 +8769,7 @@ function SDateRangePicker({
                     value: value ?? null,
                     selectable,
                     maxRange,
+                    useTimePicker,
                     onSelect: select,
                     onPendingStartChange: setPendingStart,
                     onViewChange
@@ -9955,15 +10349,15 @@ var SBarcodeInput = forwardRef(
 );
 
 // src/components/STimePicker/timepicker.config.ts
-var V2 = (path) => `var(--cmp-timepicker-${path})`;
+var V3 = (path) => `var(--cmp-timepicker-${path})`;
 var TIMEPICKER_SIZES = ["sm", "md"];
 var TIMEPICKER_SIZE_CONFIG = {
   sm: {
-    height: V2("sm-height"),
-    paddingX: V2("sm-paddingX"),
-    gap: V2("sm-gap"),
-    icon: V2("sm-icon"),
-    radius: V2("sm-radius"),
+    height: V3("sm-height"),
+    paddingX: V3("sm-paddingX"),
+    gap: V3("sm-gap"),
+    icon: V3("sm-icon"),
+    radius: V3("sm-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 12,
     lineHeight: 20,
@@ -9971,11 +10365,11 @@ var TIMEPICKER_SIZE_CONFIG = {
     fieldMinWidth: 128
   },
   md: {
-    height: V2("md-height"),
-    paddingX: V2("md-paddingX"),
-    gap: V2("md-gap"),
-    icon: V2("md-icon"),
-    radius: V2("md-radius"),
+    height: V3("md-height"),
+    paddingX: V3("md-paddingX"),
+    gap: V3("md-gap"),
+    icon: V3("md-icon"),
+    radius: V3("md-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 14,
     lineHeight: 24,
@@ -10804,6 +11198,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, SActionModal, SBadge, SBarcodeInput, SButton, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSelect, SSwitch, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, 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_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, SActionModal, SBadge, SBarcodeInput, SButton, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, 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