sellmate-design-system-react 0.3.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: {
@@ -6660,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"
@@ -9834,6 +9834,854 @@ 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;
@@ -9891,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;
@@ -9898,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;