sellmate-design-system-react 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');
@@ -40,7 +41,6 @@ var RDialog__namespace = /*#__PURE__*/_interopNamespace(RDialog);
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
 var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
 
-// src/lib/cn.ts
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     classGroups: {
@@ -3943,6 +3943,7 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
@@ -3979,6 +3980,7 @@ function SGhostButton({
       disabled,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
       tabIndex: disabled ? -1 : void 0,
       onClick: (e) => {
         if (disabled) {
@@ -4906,13 +4908,27 @@ var belt = (p) => `var(--cmp-gnbBelt-${p})`;
 var box = (p) => `var(--cmp-gnbBox-${p})`;
 var light = (p) => `var(--cmp-light-${p})`;
 var dark = (p) => `var(--cmp-dark-${p})`;
-var GNB_LAYOUT = {
-  // 사용자 명명: type="box" → gnbBox 토큰(둥금), type="belt" → gnbBelt 토큰(각짐)
-  box: {
+var GNB_HEADER = {
+  fix: {
+    topHeight: belt("top-height"),
+    topPaddingX: belt("top-paddingX"),
+    topGap: belt("top-gap"),
+    logoHeight: belt("logo-height")
+  },
+  full: {
+    topHeight: box("top-height"),
     topPaddingX: box("paddingX"),
     topGap: box("gap"),
     // 상단바 gap (버튼 간 세부 gap 은 --cmp-gnbBox-button-gap)
-    bodyPadding: box("menu-body-padding"),
+    logoHeight: box("logo-height")
+  }
+};
+var GNB_MENU = {
+  box: {
+    // menu.body.padding 은 전방향 토큰 → 세로 패딩과 아이템 좌우 여백 양쪽에 쓴다
+    bodyPaddingY: box("menu-body-padding"),
+    itemMarginX: box("menu-body-padding"),
+    itemPaddingY: box("item-paddingY"),
     itemPaddingRight: box("item-paddingRight"),
     itemGap: box("item-gap"),
     itemRadius: box("item-radius"),
@@ -4932,9 +4948,10 @@ var GNB_LAYOUT = {
     // token: gnbBox.item.typography.default.lineHeight
   },
   belt: {
-    topPaddingX: belt("top-paddingX"),
-    topGap: belt("top-gap"),
-    bodyPadding: belt("body-paddingY"),
+    bodyPaddingY: belt("body-paddingY"),
+    itemMarginX: "0px",
+    // belt 토큰에 가로 여백 없음 → 풀폭 행 (들여쓰기는 depth*-paddingLeft 전담)
+    itemPaddingY: belt("item-paddingY"),
     itemPaddingRight: belt("item-paddingRight"),
     itemGap: belt("item-gap"),
     itemRadius: "0px",
@@ -4964,7 +4981,9 @@ var GNB_COLORS = {
     itemBgHover: light("item-bg-hover"),
     itemBgSelected: light("item-bg-selected"),
     itemColorDefault: light("item-fg-default"),
-    itemColorActive: light("item-fg-selected")
+    itemColorHover: light("item-fg-hover"),
+    itemColorActive: light("item-fg-selected"),
+    itemChevron: light("item-chevron")
   },
   dark: {
     panelBg: dark("bg"),
@@ -4973,18 +4992,19 @@ var GNB_COLORS = {
     itemBgHover: dark("item-bg-hover"),
     itemBgSelected: dark("item-bg-selected"),
     itemColorDefault: dark("item-fg-default"),
-    itemColorActive: dark("item-fg-selected")
+    itemColorHover: dark("item-fg-hover"),
+    itemColorActive: dark("item-fg-selected"),
+    itemChevron: dark("item-chevron")
   }
 };
 var GNB_COMMON = {
-  topHeight: box("top-height"),
-  // 56 (box=belt 동일)
-  logoHeight: box("logo-height"),
-  // 32
-  itemPaddingY: box("item-paddingY"),
-  // 6
-  foldWidth: belt("fold-width")
-  // 48 (belt 토큰 공유)
+  /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
+  foldWidth: belt("fold-width"),
+  /**
+   * 상단바 아이콘 버튼 사이 간격. fix 레일(세로 스택)의 gap·상하 여백에 쓴다.
+   * 레일 전용 여백 토큰이 따로 없어 같은 값(8px)인 이 토큰으로 재해석했다.
+   */
+  buttonGap: box("button-gap")
 };
 var GNB_MENU_WIDTH = 240;
 function findGnbAncestors(items, value) {
@@ -5008,6 +5028,7 @@ function useSLayout() {
 }
 var SLayout = react.forwardRef(function SLayout2({
   type = "box",
+  header = "fix",
   folded,
   defaultFolded = false,
   onFoldedChange,
@@ -5027,22 +5048,23 @@ var SLayout = react.forwardRef(function SLayout2({
     [isControlled, onFoldedChange]
   );
   const ctx = react.useMemo(
-    () => ({ type, folded: currentFolded, setFolded }),
-    [type, currentFolded, setFolded]
+    () => ({ type, header, folded: currentFolded, setFolded }),
+    [type, header, currentFolded, setFolded]
   );
-  const isBox = type === "box";
-  const frameStyle = isBox ? {
+  const isFullHeader = header === "full";
+  const frameStyle = isFullHeader ? {
     gridTemplateColumns: `${currentFolded ? 0 : GNB_MENU_WIDTH}px 1fr`,
-    gridTemplateRows: `${GNB_COMMON.topHeight} 1fr`
+    gridTemplateRows: `${GNB_HEADER[header].topHeight} 1fr`
   } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
       "data-type": type,
+      "data-header": header,
       className: cn(
         "box-border h-full overflow-hidden",
-        isBox ? "grid" : "flex flex-row",
+        isFullHeader ? "grid" : "flex flex-row",
         className
       ),
       style: { ...frameStyle, ...style },
@@ -5051,9 +5073,10 @@ var SLayout = react.forwardRef(function SLayout2({
     }
   ) });
 });
-var DEPTH_PADDING_LEFT = (L, depth) => depth === 1 ? L.depth1PaddingLeft : depth === 2 ? L.depth2PaddingLeft : L.depth3PaddingLeft;
+var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = react.forwardRef(function SGnb2({
   type: typeProp,
+  header: headerProp,
   color = "light",
   items,
   value = "",
@@ -5062,14 +5085,17 @@ var SGnb = react.forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
-  search,
+  ariaLabel = "global navigation",
   className,
-  style
+  style,
+  ...rest
 }, ref) {
   const layout = react.useContext(SLayoutContext);
   const type = typeProp ?? layout?.type ?? "box";
+  const header = headerProp ?? layout?.header ?? "fix";
   const folded = foldedProp ?? layout?.folded ?? false;
-  const L = GNB_LAYOUT[type];
+  const H = GNB_HEADER[header];
+  const M = GNB_MENU[type];
   const C = GNB_COLORS[color];
   const [expandedKeys, setExpandedKeys] = react.useState(
     () => new Set(findGnbAncestors(items, value))
@@ -5079,6 +5105,7 @@ var SGnb = react.forwardRef(function SGnb2({
     const ancestors = findGnbAncestors(items, value);
     if (ancestors.length === 0) return;
     setExpandedKeys((prev) => {
+      if (ancestors.every((a) => prev.has(a))) return prev;
       const next = new Set(prev);
       ancestors.forEach((a) => next.add(a));
       return next;
@@ -5103,148 +5130,142 @@ var SGnb = react.forwardRef(function SGnb2({
   const handleFoldToggle = () => {
     const next = !folded;
     onFoldChange?.(next);
-    layout?.setFolded(next);
+    if (foldedProp === void 0) layout?.setFolded(next);
   };
-  const iconBtnClass = "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-1.5";
   const renderItem = (item, depth) => {
     const hasChildren = !!(item.children && item.children.length > 0);
     const isSelected = !hasChildren && item.value === value;
     const isExpanded = expandedKeys.has(item.value);
-    const isHovered = hoveredKey === item.value;
-    const bg = isSelected ? C.itemBgSelected : isHovered && !item.disabled ? C.itemBgHover : C.itemBgDefault;
+    const isHovered = hoveredKey === item.value && !item.disabled;
     const itemStyle = {
-      gap: L.itemGap,
-      paddingTop: GNB_COMMON.itemPaddingY,
-      paddingBottom: GNB_COMMON.itemPaddingY,
-      paddingRight: L.itemPaddingRight,
-      paddingLeft: DEPTH_PADDING_LEFT(L, depth),
-      marginLeft: L.bodyPadding,
-      marginRight: L.bodyPadding,
-      borderRadius: L.itemRadius,
-      backgroundColor: bg,
-      color: isSelected ? C.itemColorActive : C.itemColorDefault,
-      fontSize: depth === 1 ? L.depth1FontSize : L.itemFontSize,
-      lineHeight: `${depth === 1 ? L.depth1LineHeight : L.itemLineHeight}px`,
-      fontWeight: depth === 1 || isSelected ? L.depth1FontWeight : 400,
+      gap: M.itemGap,
+      paddingTop: M.itemPaddingY,
+      paddingBottom: M.itemPaddingY,
+      paddingRight: M.itemPaddingRight,
+      paddingLeft: DEPTH_PADDING_LEFT(M, depth),
+      marginLeft: M.itemMarginX,
+      marginRight: M.itemMarginX,
+      borderRadius: M.itemRadius,
+      backgroundColor: isSelected ? C.itemBgSelected : isHovered ? C.itemBgHover : C.itemBgDefault,
+      color: isSelected ? C.itemColorActive : isHovered ? C.itemColorHover : C.itemColorDefault,
+      // <button> 의 UA 폰트(Arial 13.3px)를 끊고 앱 폰트를 잇는다
+      fontFamily: "inherit",
+      fontSize: depth === 1 ? M.depth1FontSize : M.itemFontSize,
+      lineHeight: `${depth === 1 ? M.depth1LineHeight : M.itemLineHeight}px`,
+      fontWeight: depth === 1 || isSelected ? M.depth1FontWeight : 400,
       opacity: item.disabled ? 0.4 : 1,
       cursor: item.disabled ? "not-allowed" : "pointer"
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          role: hasChildren ? "button" : "menuitem",
-          tabIndex: item.disabled ? -1 : 0,
-          "aria-disabled": item.disabled || void 0,
-          "aria-expanded": hasChildren ? isExpanded : void 0,
-          "aria-current": isSelected ? "page" : void 0,
-          className: "box-border flex select-none items-center transition-colors duration-150",
-          style: itemStyle,
-          onClick: () => handleItemClick(item),
-          onMouseEnter: () => setHoveredKey(item.value),
-          onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleItemClick(item);
-            }
-          },
-          children: [
-            depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: L.depth1Icon, className: "shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: item.label }),
-            item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
-              STag,
-              {
-                shape: "square",
-                size: "xs",
-                color: isSelected ? "blue" : "grey",
-                label: item.tag,
-                className: "shrink-0"
-              }
-            ),
-            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
-              SIcon,
-              {
-                name: "chevronDown",
-                size: L.itemArrow,
-                rotate: isExpanded ? 180 : 0,
-                className: "shrink-0 transition-transform duration-150"
-              }
-            )
-          ]
-        }
-      ),
-      hasChildren && isExpanded && item.children.map((child) => renderItem(child, depth + 1))
-    ] }, item.value);
+    return (
+      // li 를 flex-col 로 둬야 버튼이 좌우 마진만큼 안쪽으로 들어가고,
+      // 하위 ul 은 마진 없이 전폭을 써서 depth*-paddingLeft 가 들여쓰기를 단독으로 책임진다.
+      /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: item.disabled,
+            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-current": isSelected ? "page" : void 0,
+            className: "box-border flex select-none items-center border-none bg-transparent text-left transition-colors duration-150",
+            style: itemStyle,
+            onClick: () => handleItemClick(item),
+            onMouseEnter: () => setHoveredKey(item.value),
+            onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
+            children: [
+              depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: M.depth1Icon, className: "shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: item.label }),
+              item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+                STag,
+                {
+                  shape: "square",
+                  size: "xs",
+                  color: item.tagColor ?? "blue",
+                  label: item.tag,
+                  className: "shrink-0"
+                }
+              ),
+              hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "chevronDown",
+                  size: M.itemArrow,
+                  color: C.itemChevron,
+                  rotate: isExpanded ? 180 : 0,
+                  className: "shrink-0 transition-transform duration-150"
+                }
+              )
+            ]
+          }
+        ),
+        hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: item.children.map((child) => renderItem(child, depth + 1)) })
+      ] }, item.value)
+    );
+  };
+  const railFolded = folded && header === "fix";
+  const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : GNB_MENU_WIDTH;
+  const rootStyle = {
+    width: rootWidth,
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...style
   };
-  const railFolded = folded && type === "belt";
-  const rootWidth = type === "box" ? "100%" : folded ? GNB_COMMON.foldWidth : GNB_MENU_WIDTH;
-  const inBoxGrid = !!layout && type === "box";
-  const rootStyle = react.useMemo(
-    () => ({
-      width: rootWidth,
-      ...inBoxGrid ? { gridArea: "1 / 1 / -1 / -1" } : null,
-      ...style
-    }),
-    [rootWidth, inBoxGrid, style]
-  );
-  const iconColor = C.itemColorDefault;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
-      className: cn(
-        "box-border flex flex-col",
-        type === "box" && !inBoxGrid ? "h-auto" : "h-full",
-        className
-      ),
+      className: cn("box-border flex h-full shrink-0 flex-col", className),
       style: rootStyle,
       "data-type": type,
+      "data-header": header,
       "data-color": color,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn("box-border flex items-center", railFolded && "flex-col"),
             style: {
-              gap: railFolded ? 8 : L.topGap,
-              height: railFolded ? "auto" : GNB_COMMON.topHeight,
-              padding: railFolded ? "8px 0" : `0 ${L.topPaddingX}`,
+              gap: railFolded ? GNB_COMMON.buttonGap : H.topGap,
+              height: railFolded ? "auto" : H.topHeight,
+              padding: railFolded ? `${GNB_COMMON.buttonGap} 0` : `0 ${H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
-              color: iconColor
+              pointerEvents: "auto",
+              // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
+              color: C.itemColorDefault
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              onLauncherClick && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
                 {
-                  type: "button",
-                  "aria-label": "app launcher",
-                  className: iconBtnClass,
+                  icon: "launcher",
+                  size: "xs",
+                  intent: color === "dark" ? "inverse" : "default",
+                  ariaLabel: "app launcher",
                   onClick: onLauncherClick,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "launcher", size: 20 })
+                  className: "shrink-0"
                 }
               ),
-              !railFolded && logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", style: { height: GNB_COMMON.logoHeight }, children: logo }),
-              !railFolded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: search }),
+              !railFolded && logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                SGhostButton,
                 {
-                  type: "button",
-                  "aria-label": "toggle navigation",
-                  "aria-pressed": folded,
-                  className: cn(iconBtnClass, !railFolded && "ml-auto"),
+                  icon: "sidebar",
+                  size: "xs",
+                  intent: color === "dark" ? "inverse" : "default",
+                  ariaLabel: "toggle navigation",
+                  ariaPressed: folded,
                   onClick: handleFoldToggle,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "sidebar", size: 20 })
+                  className: cn("shrink-0", !railFolded && "ml-auto")
                 }
               )
             ]
           }
         ),
         !folded && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "nav",
           {
-            role: "menu",
+            "aria-label": ariaLabel,
             className: "flex flex-col overflow-y-auto",
             style: {
               width: GNB_MENU_WIDTH,
@@ -5253,11 +5274,12 @@ var SGnb = react.forwardRef(function SGnb2({
               flexShrink: 1,
               flexBasis: "auto",
               minHeight: 0,
-              paddingTop: L.bodyPadding,
-              paddingBottom: L.bodyPadding,
-              backgroundColor: C.panelBg
+              paddingTop: M.bodyPaddingY,
+              paddingBottom: M.bodyPaddingY,
+              backgroundColor: C.panelBg,
+              pointerEvents: "auto"
             },
-            children: items.map((item) => renderItem(item, 1))
+            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: items.map((item) => renderItem(item, 1)) })
           }
         )
       ]
@@ -5266,7 +5288,7 @@ var SGnb = react.forwardRef(function SGnb2({
 });
 var SPage = react.forwardRef(function SPage2({ className, style, children, ...rest }, ref) {
   const layout = react.useContext(SLayoutContext);
-  const gridStyle = layout?.type === "box" ? { gridColumn: 2, gridRow: 2 } : void 0;
+  const gridStyle = layout?.header === "full" ? { gridColumn: 2, gridRow: 2 } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
@@ -6638,7 +6660,7 @@ var STable = react.forwardRef(function STable2({
             ref: scrollRef,
             onScroll: handleScroll,
             className: cn(
-              "relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
+              "bg-white relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
               radiusClass,
               // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤·인터랙션 차단
               (isLoading || rowCount === 0) && "overflow-hidden pointer-events-none"
@@ -9812,13 +9834,862 @@ var SBarcodeInput = react.forwardRef(
   }
 );
 
+// src/components/STimePicker/timepicker.config.ts
+var V2 = (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"),
+    // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
+    fontSize: 12,
+    lineHeight: 20,
+    minWidth: 80,
+    fieldMinWidth: 128
+  },
+  md: {
+    height: V2("md-height"),
+    paddingX: V2("md-paddingX"),
+    gap: V2("md-gap"),
+    icon: V2("md-icon"),
+    radius: V2("md-radius"),
+    // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
+    fontSize: 14,
+    lineHeight: 24,
+    minWidth: 96,
+    fieldMinWidth: 160
+  }
+};
+function clampTimePart(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+function padTimePart(value) {
+  return String(value).padStart(2, "0");
+}
+function parseTimeValue(value) {
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? "");
+  if (!match) return { hour: 0, minute: 0 };
+  return {
+    hour: clampTimePart(Number(match[1]), 0, 23),
+    minute: clampTimePart(Number(match[2]), 0, 59)
+  };
+}
+function formatTimeValue(hour, minute) {
+  return `${padTimePart(clampTimePart(hour, 0, 23))}:${padTimePart(clampTimePart(minute, 0, 59))}`;
+}
+function formatTimeDisplay(value, type) {
+  if (value == null || value === "") return "";
+  const { hour, minute } = parseTimeValue(value);
+  if (type === "default") return formatTimeValue(hour, minute);
+  const meridiem = hour >= 12 ? "\uC624\uD6C4" : "\uC624\uC804";
+  const displayHour = hour % 12 === 0 ? 12 : hour % 12;
+  return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
+}
+function TimeSelector({
+  value,
+  useMeridiem,
+  minuteStep,
+  onChange
+}) {
+  const parsed = react.useMemo(() => parseTimeValue(value), [value]);
+  const [hour, setHour] = react.useState(parsed.hour);
+  const [minute, setMinute] = react.useState(parsed.minute);
+  const [editingPart, setEditingPart] = react.useState(null);
+  const [inputDraft, setInputDraft] = react.useState({});
+  react.useEffect(() => {
+    setHour(parsed.hour);
+    setMinute(parsed.minute);
+  }, [parsed.hour, parsed.minute]);
+  const meridiem = hour >= 12 ? "PM" : "AM";
+  const displayHour = useMeridiem ? hour % 12 === 0 ? 12 : hour % 12 : hour;
+  const commit = (nextHour, nextMinute) => {
+    const h = clampTimePart(nextHour, 0, 23);
+    const m = clampTimePart(nextMinute, 0, 59);
+    setHour(h);
+    setMinute(m);
+    onChange(formatTimeValue(h, m));
+  };
+  const setMeridiem = (next) => {
+    if (next === meridiem) return;
+    commit(next === "AM" ? hour - 12 : hour + 12, minute);
+  };
+  const changeMinute = (delta) => {
+    const next = minute + delta;
+    if (next > 59) {
+      commit((hour + 1) % 24, next - 60);
+      return;
+    }
+    if (next < 0) {
+      commit((hour + 23) % 24, next + 60);
+      return;
+    }
+    commit(hour, next);
+  };
+  const changeHour = (delta) => commit((hour + delta + 24) % 24, minute);
+  const sanitizeInput = (next) => next.replace(/\D/g, "").slice(0, 2);
+  const beginEdit = (part, currentValue) => {
+    setEditingPart(part);
+    setInputDraft((prev) => ({ ...prev, [part]: String(currentValue).padStart(2, "0") }));
+  };
+  const commitHourDraft = (draft) => {
+    const clamped = clampTimePart(Number(draft), useMeridiem ? 1 : 0, useMeridiem ? 12 : 23);
+    const nextHour = useMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
+    commit(nextHour, minute);
+    return clamped;
+  };
+  const commitMinuteDraft = (draft) => {
+    const clamped = clampTimePart(Number(draft), 0, 59);
+    commit(hour, clamped);
+    return clamped;
+  };
+  const endEdit = (part) => {
+    const draft = inputDraft[part];
+    if (part === "hour" && draft != null && draft !== "") {
+      commitHourDraft(draft);
+    }
+    if (part === "minute" && draft != null && draft !== "") {
+      commitMinuteDraft(draft);
+    }
+    setEditingPart(null);
+    setInputDraft({});
+  };
+  const inputStyle = {
+    width: "var(--cmp-timepicker-selector-input-width)",
+    height: "var(--cmp-textinput-sm-height)",
+    borderRadius: "var(--cmp-textinput-sm-radius)",
+    border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
+    color: "var(--cmp-textinput-text-default)",
+    fontSize: 12,
+    lineHeight: "20px"
+  };
+  const renderColumn = (type) => {
+    const isHour = type === "hour";
+    const val = isHour ? displayHour : minute;
+    const displayValue = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center",
+        style: { gap: "var(--cmp-timepicker-selector-time-column-gap)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronUp",
+              size: "xs",
+              ariaLabel: `${isHour ? "\uC2DC" : "\uBD84"} \uC99D\uAC00`,
+              onClick: () => isHour ? changeHour(1) : changeMinute(minuteStep)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "aria-label": isHour ? "\uC2DC" : "\uBD84",
+              inputMode: "numeric",
+              value: displayValue,
+              placeholder: "-",
+              onFocus: () => beginEdit(type, val),
+              onBlur: () => endEdit(type),
+              onChange: (event) => {
+                const draft = sanitizeInput(event.target.value);
+                setInputDraft((prev) => ({ ...prev, [type]: draft }));
+                if (draft === "") return;
+                const raw = Number(draft);
+                if (isHour) {
+                  if (draft.length < 2) return;
+                  const clamped2 = commitHourDraft(draft);
+                  const displayDraft2 = raw === clamped2 ? draft : String(clamped2);
+                  setInputDraft((prev) => ({ ...prev, [type]: displayDraft2 }));
+                  return;
+                }
+                if (draft.length < 2) return;
+                const clamped = commitMinuteDraft(draft);
+                const displayDraft = raw === clamped ? draft : String(clamped);
+                setInputDraft((prev) => ({ ...prev, [type]: displayDraft }));
+              },
+              className: "box-border bg-white text-center outline-none",
+              style: inputStyle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronDown",
+              size: "xs",
+              ariaLabel: `${isHour ? "\uC2DC" : "\uBD84"} \uAC10\uC18C`,
+              onClick: () => isHour ? changeHour(-1) : changeMinute(-minuteStep)
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col items-stretch justify-center overflow-hidden",
+      style: {
+        background: "var(--cmp-timepicker-selector-bg)",
+        borderRadius: "var(--cmp-timepicker-selector-radius)",
+        boxShadow: "4px 8px 16px -4px rgba(34,34,34,0.1), 0 0 24px -6px rgba(34,34,34,0.12)"
+      },
+      children: [
+        useMeridiem && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            style: {
+              padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item, index) => {
+              const selected = item === meridiem;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMeridiem(item),
+                  className: cn(
+                    "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
+                    index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)]" : "rounded-r-[var(--cmp-select-sm-radius)]",
+                    index === 0 ? "-mr-px" : "",
+                    selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
+                  ),
+                  children: item === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                },
+                item
+              );
+            }) })
+          }
+        ),
+        useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px w-full bg-[var(--sys-color-divider-default)]" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            style: {
+              gap: "var(--cmp-timepicker-selector-time-gap)",
+              padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
+            },
+            children: [
+              renderColumn("hour"),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-center",
+                  style: {
+                    width: "var(--cmp-timepicker-selector-colon-size)",
+                    color: "var(--cmp-field-hint-color)",
+                    fontSize: "var(--cmp-timepicker-selector-colon-size)",
+                    lineHeight: "var(--cmp-timepicker-selector-colon-size)"
+                  },
+                  children: ":"
+                }
+              ),
+              renderColumn("minute")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function STimePicker({
+  value,
+  onValueChange,
+  onOpenChange,
+  type = "default",
+  size = "sm",
+  placeholder = "00:00",
+  disabled = false,
+  clearable = false,
+  useMeridiem,
+  minuteStep = 1,
+  width,
+  name,
+  rules,
+  status,
+  label,
+  labelWidth,
+  icon,
+  iconColor,
+  labelTooltip,
+  labelTooltipProps,
+  addonLabel,
+  addonAlign,
+  hint,
+  error,
+  errorMessage,
+  className,
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = react.useState(false);
+  const [focused, setFocused] = react.useState(false);
+  const [ruleError, setRuleError] = react.useState("");
+  const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
+  const normalized = value ? formatTimeValue(parseTimeValue(value).hour, parseTimeValue(value).minute) : null;
+  const effectiveUseMeridiem = useMeridiem ?? type === "midday";
+  const displayText = formatTimeDisplay(normalized, effectiveUseMeridiem ? "midday" : "default");
+  const hasValue = normalized != null && normalized !== "";
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
+  const resolvedError = error || ruleError !== "";
+  const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const commitOpen = (next) => {
+    if (disabled) return;
+    setOpen(next);
+    onOpenChange?.(next);
+    if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
+  };
+  const commitValue = (next) => {
+    onValueChange?.(next);
+    if (rules && rules.length > 0) setRuleError(runRules(next, rules));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SField,
+    {
+      label,
+      labelWidth,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      addonLabel,
+      addonAlign,
+      size,
+      hint,
+      error: resolvedError,
+      status: resolvedStatus,
+      focused: focused || open,
+      errorMessage: ruleError !== "" ? ruleError : errorMessage,
+      width,
+      disabled,
+      className,
+      style: { minWidth: dims.fieldMinWidth, ...style },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            name,
+            disabled,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "clockOutline",
+                  size: dims.icon,
+                  color: disabled ? "var(--cmp-timepicker-icon-disabled)" : "var(--cmp-timepicker-icon-default)",
+                  className: "flex-shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "flex-1 truncate text-center",
+                  style: {
+                    minWidth: dims.minWidth,
+                    fontSize: dims.fontSize,
+                    lineHeight: `${dims.lineHeight}px`,
+                    color: disabled ? "var(--cmp-timepicker-text-disabled)" : hasValue ? "var(--cmp-timepicker-text-default)" : "var(--cmp-field-hint-color)"
+                  },
+                  children: hasValue ? displayText : placeholder
+                }
+              ),
+              clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  icon: "close",
+                  size: "xs",
+                  ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    commitValue(null);
+                  }
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover2__namespace.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              TimeSelector,
+              {
+                value: normalized,
+                useMeridiem: effectiveUseMeridiem,
+                minuteStep,
+                onChange: commitValue
+              }
+            )
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/components/STimeRangePicker/time-range-picker.config.ts
+function getTimeMinutes(value) {
+  const { hour, minute } = parseTimeValue(value);
+  return hour * 60 + minute;
+}
+function normalizeTimeRangeValue(value, rangeOrder = "strict") {
+  if (value == null) return null;
+  const normalized = value.map((item) => {
+    const parsed = parseTimeValue(item);
+    return formatTimeValue(parsed.hour, parsed.minute);
+  });
+  if (rangeOrder === "strict" && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
+    return [normalized[0], normalized[0]];
+  }
+  return normalized;
+}
+function formatTimeRangeDisplay(value, type) {
+  if (value == null || value[0] === "" || value[1] === "") return "";
+  return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
+}
+function RangeTimeSelector({
+  value,
+  useMeridiem,
+  minuteStep,
+  rangeOrder,
+  onChange
+}) {
+  const range = react.useMemo(() => value ?? ["00:00", "23:59"], [value]);
+  const [editingKey, setEditingKey] = react.useState(null);
+  const [inputDraft, setInputDraft] = react.useState({});
+  const autoAdjustedRef = react.useRef(null);
+  const getParts = (side) => parseTimeValue(side === "start" ? range[0] : range[1]);
+  const getMeridiem = (side) => getParts(side).hour >= 12 ? "PM" : "AM";
+  const getDisplayHour = (side) => {
+    const { hour } = getParts(side);
+    if (!useMeridiem) return hour;
+    const displayHour = hour % 12;
+    return displayHour === 0 ? 12 : displayHour;
+  };
+  const commit = (side, hour, minute, direction = "unknown") => {
+    const next = formatTimeValue(hour, minute);
+    onChange(normalizeNextRange(side === "start" ? [next, range[1]] : [range[0], next], side, direction));
+  };
+  const getTimeMinutes2 = (time) => {
+    const { hour, minute } = parseTimeValue(time);
+    return hour * 60 + minute;
+  };
+  const normalizeNextRange = (nextRange, changedSide, direction) => {
+    if (rangeOrder === "allow-cross-day") return nextRange;
+    const [start, end] = nextRange;
+    const [currentStart, currentEnd] = range;
+    if (getTimeMinutes2(start) <= getTimeMinutes2(end)) {
+      const shouldKeepSynced = autoAdjustedRef.current?.side === changedSide && currentStart === currentEnd && start !== end && (direction === "unknown" || autoAdjustedRef.current.direction === direction);
+      if (shouldKeepSynced) {
+        return changedSide === "start" ? [start, start] : [end, end];
+      }
+      autoAdjustedRef.current = null;
+      return nextRange;
+    }
+    autoAdjustedRef.current = {
+      side: changedSide,
+      direction: changedSide === "start" ? "increase" : "decrease"
+    };
+    return changedSide === "start" ? [start, start] : [end, end];
+  };
+  const changeHour = (side, delta) => {
+    const { hour, minute } = getParts(side);
+    commit(side, (hour + delta + 24) % 24, minute, delta > 0 ? "increase" : "decrease");
+  };
+  const changeMinute = (side, delta) => {
+    const { hour, minute } = getParts(side);
+    const next = minute + delta;
+    if (next > 59) {
+      commit(side, (hour + 1) % 24, next - 60, delta > 0 ? "increase" : "decrease");
+      return;
+    }
+    if (next < 0) {
+      commit(side, (hour + 23) % 24, next + 60, delta > 0 ? "increase" : "decrease");
+      return;
+    }
+    commit(side, hour, next, delta > 0 ? "increase" : "decrease");
+  };
+  const setMeridiem = (side, next) => {
+    const current = getMeridiem(side);
+    if (current === next) return;
+    const { hour, minute } = getParts(side);
+    commit(side, next === "AM" ? hour - 12 : hour + 12, minute);
+  };
+  const getEditingKey = (side, part) => `${side}-${part}`;
+  const sanitizeInput = (next) => next.replace(/\D/g, "").slice(0, 2);
+  const beginEdit = (side, part, currentValue) => {
+    const key = getEditingKey(side, part);
+    setEditingKey(key);
+    setInputDraft((prev) => ({ ...prev, [key]: String(currentValue).padStart(2, "0") }));
+  };
+  const commitHourDraft = (side, draft) => {
+    const clamped = clampTimePart(Number(draft), useMeridiem ? 1 : 0, useMeridiem ? 12 : 23);
+    const parts = getParts(side);
+    const meridiem = getMeridiem(side);
+    const nextHour = useMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
+    commit(side, nextHour, parts.minute);
+    return clamped;
+  };
+  const commitMinuteDraft = (side, draft) => {
+    const { hour } = getParts(side);
+    const clamped = clampTimePart(Number(draft), 0, 59);
+    commit(side, hour, clamped);
+    return clamped;
+  };
+  const endEdit = (side, part) => {
+    const key = getEditingKey(side, part);
+    const draft = inputDraft[key];
+    if (part === "hour" && draft != null && draft !== "") {
+      commitHourDraft(side, draft);
+    }
+    if (part === "minute" && draft != null && draft !== "") {
+      commitMinuteDraft(side, draft);
+    }
+    setEditingKey(null);
+    setInputDraft({});
+  };
+  const inputStyle = {
+    width: "var(--cmp-timepicker-selector-input-width)",
+    height: "var(--cmp-textinput-sm-height)",
+    borderRadius: "var(--cmp-textinput-sm-radius)",
+    border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
+    color: "var(--cmp-textinput-text-default)",
+    fontSize: 12,
+    lineHeight: "20px"
+  };
+  const renderColumn = (side, kind) => {
+    const isHour = kind === "hour";
+    const { minute } = getParts(side);
+    const val = isHour ? getDisplayHour(side) : minute;
+    const currentEditingKey = getEditingKey(side, kind);
+    const displayValue = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center",
+        style: { gap: "var(--cmp-timepicker-selector-time-column-gap)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronUp",
+              size: "xs",
+              ariaLabel: `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"} \uC99D\uAC00`,
+              onClick: () => isHour ? changeHour(side, 1) : changeMinute(side, minuteStep)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "aria-label": `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"}`,
+              inputMode: "numeric",
+              value: displayValue,
+              placeholder: "-",
+              onFocus: () => beginEdit(side, kind, val),
+              onBlur: () => endEdit(side, kind),
+              onChange: (event) => {
+                const draft = sanitizeInput(event.target.value);
+                setInputDraft((prev) => ({ ...prev, [currentEditingKey]: draft }));
+                if (draft === "") return;
+                const raw = Number(draft);
+                if (isHour) {
+                  if (draft.length < 2) return;
+                  const clamped2 = commitHourDraft(side, draft);
+                  const displayDraft2 = raw === clamped2 ? draft : String(clamped2);
+                  setInputDraft((prev) => ({ ...prev, [currentEditingKey]: displayDraft2 }));
+                  return;
+                }
+                if (draft.length < 2) return;
+                const clamped = commitMinuteDraft(side, draft);
+                const displayDraft = raw === clamped ? draft : String(clamped);
+                setInputDraft((prev) => ({ ...prev, [currentEditingKey]: displayDraft }));
+              },
+              className: "box-border bg-white text-center outline-none",
+              style: inputStyle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "chevronDown",
+              size: "xs",
+              ariaLabel: `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"} \uAC10\uC18C`,
+              onClick: () => isHour ? changeHour(side, -1) : changeMinute(side, -minuteStep)
+            }
+          )
+        ]
+      }
+    );
+  };
+  const renderPanel = (side, title) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center justify-center",
+      style: { gap: "var(--cmp-timepicker-selector-range-section-gap)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col items-center",
+            style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-nowrap text-center text-[12px] font-bold leading-[20px] text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
+              useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item, index) => {
+                const selected = item === getMeridiem(side);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setMeridiem(side, item),
+                    className: cn(
+                      "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
+                      index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)] -mr-px" : "rounded-r-[var(--cmp-select-sm-radius)]",
+                      selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
+                    ),
+                    children: item === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                  },
+                  item
+                );
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            style: {
+              gap: "var(--cmp-timepicker-selector-time-gap)",
+              padding: "0 var(--cmp-timepicker-selector-section-paddingX)"
+            },
+            children: [
+              renderColumn(side, "hour"),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-center",
+                  style: {
+                    width: "var(--cmp-timepicker-selector-colon-size)",
+                    color: "var(--cmp-field-hint-color)",
+                    fontSize: "var(--cmp-timepicker-selector-colon-size)",
+                    lineHeight: "var(--cmp-timepicker-selector-colon-size)"
+                  },
+                  children: ":"
+                }
+              ),
+              renderColumn(side, "minute")
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex items-start justify-center overflow-hidden",
+      style: {
+        gap: "var(--cmp-timepicker-selector-range-panelGap)",
+        padding: "var(--cmp-timepicker-selector-range-paddingXY)",
+        background: "var(--cmp-timepicker-selector-bg)",
+        borderRadius: "var(--cmp-timepicker-selector-radius)",
+        boxShadow: "var(--shadow-spread-sm), var(--shadow-spread-md)"
+      },
+      children: [
+        renderPanel("start", "\uC2DC\uC791 \uC2DC\uAC04"),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch w-px bg-[var(--sys-color-divider-default)]" }),
+        renderPanel("end", "\uC885\uB8CC \uC2DC\uAC04")
+      ]
+    }
+  );
+}
+function STimeRangePicker({
+  value,
+  onValueChange,
+  onOpenChange,
+  type = "default",
+  size = "sm",
+  placeholder = "00:00 ~ 23:59",
+  disabled = false,
+  clearable = false,
+  useMeridiem,
+  minuteStep = 1,
+  rangeOrder = "strict",
+  width,
+  name,
+  rules,
+  status,
+  label,
+  labelWidth,
+  icon,
+  iconColor,
+  labelTooltip,
+  labelTooltipProps,
+  addonLabel,
+  addonAlign,
+  hint,
+  error,
+  errorMessage,
+  className,
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = react.useState(false);
+  const [focused, setFocused] = react.useState(false);
+  const [ruleError, setRuleError] = react.useState("");
+  const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
+  const normalized = normalizeTimeRangeValue(value ?? null, rangeOrder);
+  const effectiveUseMeridiem = useMeridiem ?? type === "midday";
+  const displayText = formatTimeRangeDisplay(
+    normalized,
+    effectiveUseMeridiem ? "midday" : "default"
+  );
+  const hasValue = normalized != null && normalized[0] !== "" && normalized[1] !== "";
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
+  const resolvedError = error || ruleError !== "";
+  const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const commitOpen = (next) => {
+    if (disabled) return;
+    setOpen(next);
+    onOpenChange?.(next);
+    if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
+  };
+  const commitValue = (next) => {
+    onValueChange?.(next);
+    if (rules && rules.length > 0) setRuleError(runRules(next, rules));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SField,
+    {
+      label,
+      labelWidth,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      addonLabel,
+      addonAlign,
+      size,
+      hint,
+      error: resolvedError,
+      status: resolvedStatus,
+      focused: focused || open,
+      errorMessage: ruleError !== "" ? ruleError : errorMessage,
+      width,
+      disabled,
+      className,
+      style: { minWidth: dims.fieldMinWidth, ...style },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            name,
+            disabled,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: "flex h-full w-full items-center overflow-hidden bg-transparent outline-none disabled:cursor-not-allowed",
+            style: { padding: `0 ${dims.paddingX}`, gap: dims.gap, borderRadius: dims.radius },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "clockOutline",
+                  size: dims.icon,
+                  color: disabled ? "var(--cmp-timepicker-icon-disabled)" : "var(--cmp-timepicker-icon-default)",
+                  className: "flex-shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "flex-1 truncate text-center",
+                  style: {
+                    minWidth: dims.minWidth,
+                    fontSize: dims.fontSize,
+                    lineHeight: `${dims.lineHeight}px`,
+                    color: disabled ? "var(--cmp-timepicker-text-disabled)" : hasValue ? "var(--cmp-timepicker-text-default)" : "var(--cmp-field-hint-color)"
+                  },
+                  children: hasValue ? displayText : placeholder
+                }
+              ),
+              clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  icon: "close",
+                  size: "xs",
+                  ariaLabel: "\uC2DC\uAC04 \uBC94\uC704 \uC9C0\uC6B0\uAE30",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    commitValue(null);
+                  }
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover2__namespace.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RangeTimeSelector,
+              {
+                value: normalized,
+                useMeridiem: effectiveUseMeridiem,
+                minuteStep,
+                rangeOrder,
+                onChange: commitValue
+              }
+            )
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
 exports.BADGE_COLORS = BADGE_COLORS;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.COLOR_KEYS = COLOR_KEYS;
 exports.GNB_COLORS = GNB_COLORS;
 exports.GNB_COMMON = GNB_COMMON;
-exports.GNB_LAYOUT = GNB_LAYOUT;
+exports.GNB_HEADER = GNB_HEADER;
+exports.GNB_MENU = GNB_MENU;
 exports.GNB_MENU_WIDTH = GNB_MENU_WIDTH;
 exports.ICONS = ICONS;
 exports.SActionModal = SActionModal;
@@ -9868,6 +10739,8 @@ exports.STabs = STabs;
 exports.STag = STag;
 exports.STextLink = STextLink;
 exports.STextarea = STextarea;
+exports.STimePicker = STimePicker;
+exports.STimeRangePicker = STimeRangePicker;
 exports.SToast = SToast;
 exports.SToastContainer = SToastContainer;
 exports.SToggle = SToggle;
@@ -9875,6 +10748,8 @@ exports.STooltip = STooltip;
 exports.TAG_COLORS = TAG_COLORS;
 exports.TAG_SHAPES = TAG_SHAPES;
 exports.TAG_SIZES = TAG_SIZES;
+exports.TIMEPICKER_SIZES = TIMEPICKER_SIZES;
+exports.TIMEPICKER_SIZE_CONFIG = TIMEPICKER_SIZE_CONFIG;
 exports.buttonPreset = buttonPreset;
 exports.cn = cn;
 exports.findGnbAncestors = findGnbAncestors;