@wipco/sdui 0.19.2 → 0.20.0

package/dist/{DatePicker-CPD2cfmG.d.ts → DatePicker-D2EtpvkQ.d.ts}

@@ -1,6 +1,24 @@
 import { S as SduiBoxProps } from './layout-B1QrIBm6.js';
 import React__default from 'react';
 
+interface TimePickerProps {
+    /** 선택된 시각 (HH:MM, 24시간제). 주어지면 controlled로 동작. */
+    value?: string;
+    onChange?: (value: string) => void;
+    /** 고를 수 있는 최소 시각 (HH:MM, 포함). */
+    min?: string;
+    /** 고를 수 있는 최대 시각 (HH:MM, 포함). */
+    max?: string;
+    /** 목록 눈금 간격(분). 기본 30 */
+    step?: number;
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+/** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
+declare const TimePicker: React__default.FC<TimePickerProps & SduiBoxProps>;
+
 interface DatePickerProps {
     /** 선택된 날짜 (YYYY-MM-DD, `withTime`이면 YYYY-MM-DDTHH:mm). 주어지면 controlled로 동작. */
     value?: string;
@@ -45,4 +63,4 @@ declare const DatePicker: React__default.FC<DatePickerProps & SduiBoxProps>;
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
 declare const DateRangePicker: React__default.FC<DateRangePickerProps & SduiBoxProps>;
 
-export { type DatePickerProps as D, type DateRangePickerProps as a, DatePicker as b, DateRangePicker as c, type DateRangeValue as d };
+export { type DatePickerProps as D, type TimePickerProps as T, type DateRangePickerProps as a, DatePicker as b, DateRangePicker as c, type DateRangeValue as d, TimePicker as e };

package/dist/{chunk-F5BAER4V.js → chunk-EQW24SJC.js}

@@ -1,5 +1,5 @@
-import { resolveTreeNodes, TreeView } from './chunk-TUR4EBKX.js';
-import { OverlayLayer } from './chunk-IY7SMV6V.js';
+import { resolveTreeNodes, TreeView } from './chunk-IDUN2ESE.js';
+import { OverlayLayer } from './chunk-XKLUCUVA.js';
 import { Field, Dialog, Icon, Button, Input } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo, useEffect } from 'react';

package/dist/chunk-HPZTFZZN.js

@@ -0,0 +1,291 @@
+import { useDismiss, usePopoverAnchor, usePortalTo, HoistedStyle, AnchoredPopoverStyles, anchorStyle, focusStaysInside } from './chunk-XKLUCUVA.js';
+import { Icon } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/env.ts
+var DEV = (() => {
+  try {
+    const meta = import.meta;
+    return Boolean(meta.env?.DEV);
+  } catch {
+    return false;
+  }
+})();
+
+// src/adapter.ts
+function isSafeNavigationTarget(to) {
+  if (typeof to !== "string") return false;
+  const value = to.replace(/[\u0000-\u0020]/g, "");
+  if (value === "") return false;
+  if (value.startsWith("//")) return false;
+  if (value.startsWith("/") || value.startsWith("?") || value.startsWith("#")) return true;
+  return /^https?:\/\//i.test(value);
+}
+async function defaultFetch(path, init) {
+  const response = await fetch(path, {
+    method: init.method,
+    headers: { "content-type": "application/json", accept: "application/json" },
+    credentials: "include",
+    body: init.body === void 0 ? void 0 : JSON.stringify(init.body),
+    signal: init.signal
+  });
+  const text = await response.text();
+  let json = null;
+  if (text) {
+    try {
+      json = JSON.parse(text);
+    } catch {
+      json = null;
+    }
+  }
+  if (!response.ok) {
+    const message = json && typeof json === "object" && typeof json.message === "string" ? json.message : `\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`;
+    throw new Error(message);
+  }
+  return json;
+}
+var defaultAdapter = {
+  navigate: (to) => {
+    if (!isSafeNavigationTarget(to)) {
+      console.error(`[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(to)}`);
+      return;
+    }
+    window.location.assign(to);
+  },
+  fetch: defaultFetch,
+  rawFetch: (path) => fetch(path, { credentials: "include" }),
+  // 항등함수. 계약을 문서화하고, 컴포넌트가 `useSduiAssetResolver()`를 조건 없이
+  // 부를 수 있게 하는 것이 전부다. **이 함수 참조 자체가 표식**이기도 하다 —
+  // `assetResolverOf`가 이것과 같은지 보고 "주입 없음"을 판정한다.
+  resolveAsset: (url) => url,
+  invalidate: (prefix) => {
+    if (DEV) console.warn(`[sdui] invalidate \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428 (prefix: ${prefix})`);
+  },
+  refresh: () => {
+    if (DEV) console.warn("[sdui] refresh \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428");
+  }
+};
+function resolveAdapter(adapter) {
+  const merged = { ...defaultAdapter };
+  if (adapter) {
+    for (const [key, value] of Object.entries(adapter)) {
+      if (value !== void 0) merged[key] = value;
+    }
+  }
+  return merged;
+}
+var SduiAdapterContext = createContext(null);
+function useSduiAdapter() {
+  return useContext(SduiAdapterContext);
+}
+function assetResolverOf(adapter) {
+  const resolve = adapter?.resolveAsset;
+  if (!resolve || resolve === defaultAdapter.resolveAsset) return null;
+  return resolve;
+}
+function useSduiAssetResolver() {
+  const adapter = useContext(SduiAdapterContext);
+  return adapter?.resolveAsset ?? defaultAdapter.resolveAsset;
+}
+function useSduiSandbox() {
+  return useContext(SduiAdapterContext)?.sandbox === true;
+}
+function hostFetchOf(adapter) {
+  const hostFetch = adapter?.fetch;
+  if (!hostFetch || hostFetch === defaultAdapter.fetch) return null;
+  return hostFetch;
+}
+var HM_RE = /^\d{2}:\d{2}$/;
+var LIST_HEIGHT = 260;
+var MINUTES_PER_DAY = 24 * 60;
+function maskHm(text) {
+  const digits = text.replace(/\D/g, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+function parseHm(value) {
+  if (typeof value !== "string" || !HM_RE.test(value)) return void 0;
+  const h = Number(value.slice(0, 2));
+  const m = Number(value.slice(3, 5));
+  if (h > 23 || m > 59) return void 0;
+  return h * 60 + m;
+}
+function formatHm(minutes) {
+  const h = Math.floor(minutes / 60) % 24;
+  const m = minutes % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+function buildOptions(step, min, max) {
+  const safeStep = Number.isFinite(step) && step >= 1 ? Math.min(Math.floor(step), 720) : 30;
+  const from = min ?? 0;
+  const to = max ?? MINUTES_PER_DAY - 1;
+  const out = [];
+  for (let m = Math.ceil(from / safeStep) * safeStep; m <= to; m += safeStep) out.push(formatHm(m));
+  return out;
+}
+function TimePickerImpl({
+  value,
+  onChange,
+  min,
+  max,
+  step = 30,
+  placeholder,
+  invalid = false,
+  disabled = false,
+  size = "md"
+}) {
+  const [open, setOpen] = useState(false);
+  const [innerValue, setInnerValue] = useState("");
+  const hostRef = useRef(null);
+  const popRef = useRef(null);
+  const inputRef = useRef(null);
+  const isControlled = value !== void 0;
+  const currentValue = (isControlled ? value : innerValue) ?? "";
+  const [text, setText] = useState(currentValue);
+  useEffect(() => {
+    setText(currentValue);
+  }, [currentValue]);
+  const minMinutes = useMemo(() => parseHm(min), [min]);
+  const maxMinutes = useMemo(() => parseHm(max), [max]);
+  const options = useMemo(() => buildOptions(step, minMinutes, maxMinutes), [step, minMinutes, maxMinutes]);
+  const dismiss = useCallback((reason) => {
+    setOpen(false);
+    if (reason === "escape") inputRef.current?.focus();
+  }, []);
+  useDismiss(open, hostRef, popRef, dismiss);
+  const anchor = usePopoverAnchor(open, hostRef, popRef, LIST_HEIGHT);
+  const portal = usePortalTo();
+  const isInvalid = Boolean(invalid);
+  const commit = (next) => {
+    if (!isControlled) setInnerValue(next);
+    onChange?.(next);
+  };
+  const handleTextChange = (raw) => {
+    const masked = maskHm(raw);
+    setText(masked);
+    if (masked === "") {
+      commit("");
+      return;
+    }
+    const minutes = parseHm(masked);
+    if (minutes === void 0) return;
+    if (minMinutes !== void 0 && minutes < minMinutes) return;
+    if (maxMinutes !== void 0 && minutes > maxMinutes) return;
+    commit(masked);
+  };
+  const focusList = () => {
+    const list = popRef.current;
+    if (!list) return;
+    (list.querySelector('[aria-selected="true"]') ?? list.querySelector('[role="option"]'))?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (open) focusList();
+      else setOpen(true);
+      return;
+    }
+    if (event.key === "Enter" && open) {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  const handleOptionKeyDown = (index) => (event) => {
+    const step2 = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+    if (step2 !== 0) {
+      event.preventDefault();
+      const next = Math.min(Math.max(index + step2, 0), options.length - 1);
+      popRef.current?.querySelectorAll('[role="option"]')[next]?.focus();
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const target = event.key === "Home" ? 0 : options.length - 1;
+      popRef.current?.querySelectorAll('[role="option"]')[target]?.focus();
+    }
+  };
+  const pick = (option) => {
+    setText(option);
+    commit(option);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+  const handleBlur = (event) => {
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
+    if (text !== currentValue) setText(currentValue);
+    setOpen(false);
+  };
+  const classes = ["wp-input", "wp-input--mono", "wp-tp-input"];
+  if (size !== "md") classes.push(`wp-input--${size}`);
+  if (isInvalid) classes.push("wp-input--invalid");
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-tp-host", onBlur: handleBlur, children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-timepicker", css: TP_CSS }),
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
+    /* @__PURE__ */ jsxs("div", { className: "wp-inputwrap wp-inputwrap--lead", children: [
+      /* @__PURE__ */ jsx("span", { className: "wp-inputwrap__lead", children: /* @__PURE__ */ jsx(Icon, { name: "clock", size: size === "lg" ? 16 : 15 }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: classes.join(" "),
+          inputMode: "numeric",
+          autoComplete: "off",
+          spellCheck: false,
+          maxLength: 5,
+          placeholder: placeholder ?? "HH:MM",
+          value: text,
+          disabled,
+          "aria-invalid": isInvalid || void 0,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          onChange: (event) => handleTextChange(event.target.value),
+          onKeyDown: handleKeyDown,
+          onPointerDown: () => {
+            if (!disabled && !open) setOpen(true);
+          }
+        }
+      )
+    ] }),
+    portal(
+      anchor,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          className: "wp-anchored-pop wp-tp-pop",
+          style: anchorStyle(anchor),
+          role: "listbox",
+          "aria-label": "\uC2DC\uAC01 \uC120\uD0DD",
+          children: options.map((option, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": option === currentValue,
+              className: option === currentValue ? "wp-tp-opt wp-tp-opt--on" : "wp-tp-opt",
+              onKeyDown: handleOptionKeyDown(index),
+              onClick: () => pick(option),
+              children: option
+            },
+            option
+          ))
+        }
+      )
+    )
+  ] });
+}
+var TP_CSS = `
+.wp-tp-host{position:relative}
+.wp-tp-input{padding-right:6px;min-width:calc(5ch + 36px)}
+.wp-tp-pop{padding:var(--wp-space-1);max-height:260px;overflow-y:auto;overscroll-behavior:contain}
+.wp-tp-opt{display:block;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-family:var(--wp-font-mono);font-size:12.5px;color:var(--wp-text-default);text-align:left;cursor:pointer}
+.wp-tp-opt:hover{background:var(--wp-surface-hover)}
+.wp-tp-opt:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-2px}
+.wp-tp-opt--on{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
+`;
+var TimePicker = boxed(TimePickerImpl, "TimePicker");
+
+export { DEV, SduiAdapterContext, TimePicker, assetResolverOf, defaultAdapter, hostFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };

package/dist/{chunk-TUR4EBKX.js → chunk-IDUN2ESE.js}

@@ -1,4 +1,4 @@
-import { buildCascadingTree } from './chunk-GUFIEWW2.js';
+import { buildCascadingTree } from './chunk-U7ZK7WYH.js';
 import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';

package/dist/{chunk-J5QWCUDJ.js → chunk-N5IATDUF.js}

@@ -1,5 +1,5 @@
-import { includesLooseSearch } from './chunk-GUFIEWW2.js';
-import { OverlayLayer } from './chunk-IY7SMV6V.js';
+import { includesLooseSearch } from './chunk-U7ZK7WYH.js';
+import { OverlayLayer } from './chunk-XKLUCUVA.js';
 import { Button, Dialog, Input, Tag, Checkbox } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-44VLH3I2.js → chunk-PFUULIZ2.js}

@@ -1,4 +1,4 @@
-import { DateRangePicker } from './chunk-IY7SMV6V.js';
+import { DateRangePicker } from './chunk-XKLUCUVA.js';
 import { SegmentedControl, Select } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo } from 'react';

package/dist/{chunk-YKROA4XK.js → chunk-SRGXODY2.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-GUFIEWW2.js';
+import { includesLooseSearch } from './chunk-U7ZK7WYH.js';
 import { Icon, Button, Input, Spinner } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useState, useEffect, useMemo } from 'react';

package/dist/{chunk-GUFIEWW2.js → chunk-U7ZK7WYH.js}

@@ -1,4 +1,4 @@
-import { useOverlayLayer, DateRangePicker } from './chunk-IY7SMV6V.js';
+import { useOverlayLayer, DateRangePicker } from './chunk-XKLUCUVA.js';
 import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-WIDDHR7L.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-IY7SMV6V.js → chunk-XKLUCUVA.js}

@@ -135,6 +135,85 @@ function OverlayLayer({
 function HoistedStyle({ id, css }) {
   return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
 }
+var ANCHOR_GAP = 8;
+var VIEWPORT_EDGE = 8;
+function anchorTo(host, height) {
+  if (!host || typeof window === "undefined") return null;
+  const rect = host.getBoundingClientRect();
+  const below = window.innerHeight - rect.bottom;
+  const up = below < height && rect.top > below;
+  return {
+    left: rect.left,
+    top: up ? void 0 : rect.bottom + ANCHOR_GAP,
+    bottom: up ? window.innerHeight - rect.top + ANCHOR_GAP : void 0,
+    minWidth: rect.width
+  };
+}
+function usePopoverAnchor(open, hostRef, popRef, height) {
+  const [anchor, setAnchor] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setAnchor(null);
+      return;
+    }
+    const place = () => setAnchor(anchorTo(hostRef.current, height));
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open, hostRef, height]);
+  useLayoutEffect(() => {
+    const el = popRef.current;
+    if (!open || !el || !anchor) return;
+    const overflow = el.getBoundingClientRect().right - (window.innerWidth - VIEWPORT_EDGE);
+    if (overflow <= 1) return;
+    setAnchor((prev) => {
+      if (!prev) return prev;
+      const left = Math.max(VIEWPORT_EDGE, prev.left - overflow);
+      return Math.abs(left - prev.left) < 1 ? prev : { ...prev, left };
+    });
+  }, [open, anchor, popRef]);
+  return anchor;
+}
+function AnchoredPopoverStyles() {
+  return /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-anchored-pop", css: ANCHORED_POP_CSS });
+}
+var ANCHORED_POP_CSS = `
+.wp-anchored-pop{position:fixed;width:max-content;max-width:min(92vw,400px);background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:var(--wp-z-dialog);pointer-events:auto}
+`;
+function anchorStyle(anchor) {
+  if (!anchor) return void 0;
+  return { left: anchor.left, top: anchor.top, bottom: anchor.bottom, minWidth: anchor.minWidth };
+}
+function usePortalTo() {
+  const container = React.useContext(OverlayContainerContext);
+  return (anchor, node) => {
+    if (!anchor) return null;
+    const root = container ?? getOverlayRoot();
+    return root ? createPortal(node, root) : node;
+  };
+}
+function useDismiss(open, hostRef, popRef, onDismiss) {
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (target instanceof Node && (hostRef.current?.contains(target) || popRef.current?.contains(target))) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [open, hostRef, popRef, onDismiss]);
+  useOverlayLayer(open, () => onDismiss("escape"), hostRef);
+}
+function focusStaysInside(next, hostRef, popRef) {
+  return next instanceof Node && Boolean(hostRef.current?.contains(next) || popRef.current?.contains(next));
+}
 var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
 var HM_RE = /^\d{2}:\d{2}$/;
 function parseYmd(value) {
@@ -365,71 +444,7 @@ function Calendar({
     })
   ] }) });
 }
-function useDismiss(open, hostRef, popRef, onDismiss) {
-  useEffect(() => {
-    if (!open) return;
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (target instanceof Node && (hostRef.current?.contains(target) || popRef.current?.contains(target))) return;
-      onDismiss("outside");
-    };
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-    };
-  }, [open, hostRef, popRef, onDismiss]);
-  useOverlayLayer(open, () => onDismiss("escape"), hostRef);
-}
 var CALENDAR_HEIGHT = 340;
-var ANCHOR_GAP = 8;
-var VIEWPORT_EDGE = 8;
-function anchorTo(host) {
-  if (!host || typeof window === "undefined") return null;
-  const rect = host.getBoundingClientRect();
-  const below = window.innerHeight - rect.bottom;
-  const up = below < CALENDAR_HEIGHT && rect.top > below;
-  return {
-    left: rect.left,
-    top: up ? void 0 : rect.bottom + ANCHOR_GAP,
-    bottom: up ? window.innerHeight - rect.top + ANCHOR_GAP : void 0,
-    minWidth: rect.width
-  };
-}
-function usePopoverAnchor(open, hostRef, popRef) {
-  const [anchor, setAnchor] = useState(null);
-  useLayoutEffect(() => {
-    if (!open) {
-      setAnchor(null);
-      return;
-    }
-    const place = () => setAnchor(anchorTo(hostRef.current));
-    place();
-    window.addEventListener("scroll", place, true);
-    window.addEventListener("resize", place);
-    return () => {
-      window.removeEventListener("scroll", place, true);
-      window.removeEventListener("resize", place);
-    };
-  }, [open, hostRef]);
-  useLayoutEffect(() => {
-    const el = popRef.current;
-    if (!open || !el || !anchor) return;
-    const overflow = el.getBoundingClientRect().right - (window.innerWidth - VIEWPORT_EDGE);
-    if (overflow > 1) {
-      setAnchor((prev) => prev ? { ...prev, left: Math.max(VIEWPORT_EDGE, prev.left - overflow) } : prev);
-    }
-  }, [open, anchor, popRef]);
-  return anchor;
-}
-function anchorStyle(anchor) {
-  if (!anchor) return void 0;
-  return { left: anchor.left, top: anchor.top, bottom: anchor.bottom, minWidth: anchor.minWidth };
-}
-function portal(anchor, container, node) {
-  if (!anchor) return null;
-  const root = container ?? getOverlayRoot();
-  return root ? createPortal(node, root) : node;
-}
 function DateInput({
   inputRef,
   value,
@@ -512,8 +527,8 @@ function DatePickerImpl({
     if (reason === "escape") inputRef.current?.focus();
   }, []);
   useDismiss(open, hostRef, popRef, dismiss);
-  const anchor = usePopoverAnchor(open, hostRef, popRef);
-  const overlayContainer = React.useContext(OverlayContainerContext);
+  const anchor = usePopoverAnchor(open, hostRef, popRef, CALENDAR_HEIGHT);
+  const portal = usePortalTo();
   const isInvalid = Boolean(invalid);
   const commit = (next) => {
     if (!isControlled) setInnerValue(next);
@@ -551,13 +566,13 @@ function DatePickerImpl({
     }
   };
   const handleBlur = (event) => {
-    const next = event.relatedTarget;
-    if (next instanceof Node && (hostRef.current?.contains(next) || popRef.current?.contains(next))) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
     if (text !== fieldText) setText(fieldText);
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", onBlur: handleBlur, children: [
     /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
     /* @__PURE__ */ jsx(
       DateInput,
       {
@@ -579,12 +594,11 @@ function DatePickerImpl({
     ),
     portal(
       anchor,
-      overlayContainer,
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: popRef,
-          className: "wp-dp-pop",
+          className: "wp-anchored-pop wp-dp-pop",
           style: anchorStyle(anchor),
           role: "dialog",
           "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825",
@@ -653,8 +667,8 @@ function DateRangePickerImpl({
     if (reason === "escape") (end === "to" ? toRef : fromRef).current?.focus();
   }, [end]);
   useDismiss(open, hostRef, popRef, dismiss);
-  const anchor = usePopoverAnchor(open, hostRef, popRef);
-  const overlayContainer = React.useContext(OverlayContainerContext);
+  const anchor = usePopoverAnchor(open, hostRef, popRef, CALENDAR_HEIGHT);
+  const portal = usePortalTo();
   const isInvalid = Boolean(invalid);
   const commit = (nextFrom, nextTo) => {
     const next = { from: nextFrom || void 0, to: nextTo || void 0 };
@@ -705,8 +719,7 @@ function DateRangePickerImpl({
     }
   };
   const handleBlur = (event) => {
-    const next = event.relatedTarget;
-    if (next instanceof Node && (hostRef.current?.contains(next) || popRef.current?.contains(next))) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef)) return;
     if (fromText !== fromValue) setFromText(fromValue);
     if (toText !== toValue) setToText(toValue);
     setOpen(false);
@@ -732,6 +745,7 @@ function DateRangePickerImpl({
   };
   return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host wp-dp-host--range", onBlur: handleBlur, children: [
     /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
     /* @__PURE__ */ jsxs("div", { className: "wp-dp-range", children: [
       /* @__PURE__ */ jsx(
         DateInput,
@@ -779,12 +793,11 @@ function DateRangePickerImpl({
     ] }),
     portal(
       anchor,
-      overlayContainer,
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: popRef,
-          className: "wp-dp-pop wp-dp-pop--wide",
+          className: "wp-anchored-pop wp-dp-pop wp-dp-pop--wide",
           style: anchorStyle(anchor),
           role: "dialog",
           "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825",
@@ -819,7 +832,6 @@ function DateRangePickerImpl({
 }
 var DP_CSS = `
 .wp-dp-host{position:relative}
-.wp-dp-pop{position:fixed;width:max-content;max-width:min(92vw,400px);background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:var(--wp-z-dialog);pointer-events:auto}
 .wp-dp-pop--wide{max-width:min(92vw,720px)}
 .wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
 .wp-dp-range{display:flex;align-items:center;gap:var(--wp-space-1)}
@@ -860,4 +872,4 @@ var DP_CSS = `
 var DatePicker = boxed(DatePickerImpl, "DatePicker");
 var DateRangePicker = boxed(DateRangePickerImpl, "DateRangePicker");
 
-export { DatePicker, DateRangePicker, HoistedStyle, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer };
+export { AnchoredPopoverStyles, DatePicker, DateRangePicker, HoistedStyle, OverlayContainerContext, OverlayLayer, anchorStyle, focusStaysInside, getOverlayRoot, useDismiss, useOverlayLayer, usePopoverAnchor, usePortalTo };

package/dist/index.d.ts

@@ -4,8 +4,8 @@ import { S as SduiPage, a as SduiAction, b as SduiPropValue, c as SduiRule } fro
 export { d as SduiArgRef, e as SduiCalcRef, f as SduiChild, g as SduiIndexRef, h as SduiItemRef, i as SduiNode, j as SduiPageQuery, k as SduiScalar, l as SduiStateRef } from './types-opTPYysN.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-B1QrIBm6.js';
 export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-B1QrIBm6.js';
-import { D as DatePickerProps, a as DateRangePickerProps } from './DatePicker-CPD2cfmG.js';
-export { b as DatePicker, c as DateRangePicker, d as DateRangeValue } from './DatePicker-CPD2cfmG.js';
+import { D as DatePickerProps, a as DateRangePickerProps, T as TimePickerProps } from './DatePicker-D2EtpvkQ.js';
+export { b as DatePicker, c as DateRangePicker, d as DateRangeValue, e as TimePicker } from './DatePicker-D2EtpvkQ.js';
 
 /**
  * 호스트 앱 연결점 — ERP에서는 라우터·erpFetch·SSE가 하던 일을
@@ -1541,6 +1541,7 @@ declare const defaultRegistry: {
     Checkbox: typeof Checkbox;
     DatePicker: React.FC<DatePickerProps & SduiBoxProps>;
     DateRangePicker: React.FC<DateRangePickerProps & SduiBoxProps>;
+    TimePicker: React.FC<TimePickerProps & SduiBoxProps>;
     Dialog: typeof SduiDialog;
     EmptyState: typeof EmptyState;
     Field: typeof Field;
@@ -1830,4 +1831,4 @@ interface ImageViewerProps {
  */
 declare function ImageViewer({ src, alt, open, onClose }: ImageViewerProps): React__default.ReactPortal | null;
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };
+export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };

package/dist/index.js

@@ -1,11 +1,11 @@
-import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-WGRB5UL4.js';
-export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-WGRB5UL4.js';
+import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, TimePicker, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-HPZTFZZN.js';
+export { TimePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-HPZTFZZN.js';
 import { ImageViewer } from './chunk-THEP3VWY.js';
 export { ImageViewer } from './chunk-THEP3VWY.js';
-import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-GUFIEWW2.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-GUFIEWW2.js';
-import { HoistedStyle, DateRangePicker, DatePicker, OverlayLayer } from './chunk-IY7SMV6V.js';
-export { DatePicker, DateRangePicker, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-IY7SMV6V.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-U7ZK7WYH.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-U7ZK7WYH.js';
+import { HoistedStyle, DateRangePicker, DatePicker, OverlayLayer } from './chunk-XKLUCUVA.js';
+export { DatePicker, DateRangePicker, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XKLUCUVA.js';
 import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, Dialog } from './chunk-WIDDHR7L.js';
 export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-WIDDHR7L.js';
 import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';
@@ -1725,6 +1725,7 @@ var defaultRegistry = {
   Checkbox,
   DatePicker,
   DateRangePicker,
+  TimePicker,
   // Dialog는 표준 닫기 UX(Escape·배경 클릭)가 붙은 래퍼로 등록한다
   Dialog: SduiDialog,
   EmptyState,

package/dist/meta.d.ts

@@ -285,6 +285,7 @@ declare const ButtonMeta: SduiComponentMeta;
 declare const CheckboxMeta: SduiComponentMeta;
 declare const DatePickerMeta: SduiComponentMeta;
 declare const DateRangePickerMeta: SduiComponentMeta;
+declare const TimePickerMeta: SduiComponentMeta;
 declare const FieldMeta: SduiComponentMeta;
 declare const FormMeta: SduiComponentMeta;
 declare const IconButtonMeta: SduiComponentMeta;
@@ -343,6 +344,7 @@ declare const coreComponentMeta: {
     Checkbox: SduiComponentMeta;
     Col: SduiComponentMeta;
     DatePicker: SduiComponentMeta;
+    TimePicker: SduiComponentMeta;
     DateRangePicker: SduiComponentMeta;
     Dialog: SduiComponentMeta;
     Divider: SduiComponentMeta;
@@ -584,4 +586,4 @@ declare function paletteGroups(catalog?: Record<string, SduiComponentMeta>): Arr
     items: SduiComponentMeta[];
 }>;
 
-export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, type SduiCategory, type SduiChildrenMeta, type SduiComponentMeta, type SduiDomMeta, type SduiEnumOption, type SduiPropGroup, type SduiPropKind, type SduiPropMeta, type SduiResizeMeta, type SduiSlotMeta, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/meta.js

@@ -991,6 +991,46 @@ var DateRangePickerMeta = {
   },
   resize: { kind: "none" }
 };
+var TimePickerMeta = {
+  name: "TimePicker",
+  label: "\uC2DC\uAC01 \uC120\uD0DD",
+  category: "input",
+  icon: "clock",
+  description: "\uC2DC\uAC01(HH:MM, 24\uC2DC\uAC04\uC81C) \u2014 \uD0A4\uBCF4\uB4DC\uB85C \uCCD0\uB3C4 \uB418\uACE0 \uB208\uAE08 \uBAA9\uB85D\uC5D0\uC11C \uACE8\uB77C\uB3C4 \uB41C\uB2E4.",
+  props: [
+    { name: "value", kind: "string", label: "\uAC12(HH:MM)", bindable: true, group: "data" },
+    { name: "onChange", kind: "action", label: "\uBCC0\uACBD", eventArg: "HH:MM \uBB38\uC790\uC5F4", group: "behavior" },
+    { name: "min", kind: "string", label: "\uCD5C\uC18C \uC2DC\uAC01", description: "HH:MM, \uD3EC\uD568", bindable: true, group: "validation" },
+    { name: "max", kind: "string", label: "\uCD5C\uB300 \uC2DC\uAC01", description: "HH:MM, \uD3EC\uD568", bindable: true, group: "validation" },
+    { name: "step", kind: "number", label: "\uB208\uAE08 \uAC04\uACA9(\uBD84)", default: 30, group: "behavior" },
+    { name: "placeholder", kind: "string", label: "\uC548\uB0B4 \uBB38\uAD6C", description: "\uAE30\uBCF8\uAC12\uC740 HH:MM", group: "content" },
+    { name: "invalid", kind: "boolean", label: "\uC624\uB958 \uD45C\uC2DC", default: false, bindable: true, group: "validation" },
+    { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
+    {
+      name: "size",
+      kind: "enum",
+      label: "\uD06C\uAE30",
+      default: "md",
+      options: [
+        { value: "sm", label: "sm 28px" },
+        { value: "md", label: "md 32px" },
+        { value: "lg", label: "lg 40px" }
+      ],
+      group: "appearance"
+    }
+  ],
+  children: { accepts: false },
+  dom: { element: "div" },
+  preset: {
+    component: "TimePicker",
+    props: {
+      placeholder: "HH:MM",
+      value: { $state: "time", default: "" },
+      onChange: { action: "setState", key: "time", fromEvent: true }
+    }
+  },
+  resize: { kind: "enum", prop: "size", values: ["sm", "md", "lg"] }
+};
 var FieldMeta = {
   name: "Field",
   label: "\uD3FC \uD544\uB4DC",
@@ -2665,6 +2705,7 @@ var coreComponentMeta = {
   Checkbox: CheckboxMeta,
   Col: ColMeta,
   DatePicker: DatePickerMeta,
+  TimePicker: TimePickerMeta,
   DateRangePicker: DateRangePickerMeta,
   Dialog: DialogMeta,
   Divider: DividerMeta,
@@ -4579,4 +4620,4 @@ function paletteGroups(catalog = allComponentMeta) {
   })).filter((group) => group.items.length > 0);
 }
 
-export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };
+export { ActionsMeta, AlertMeta, AutocompleteFieldMeta, AvatarMeta, BadgeMeta, BreadcrumbMeta, ButtonMeta, CanMeta, CardMeta, ChartMeta, CheckboxMeta, ColMeta, ColumnBoardMeta, DatePickerMeta, DateRangePickerMeta, DialogMeta, DiffViewMeta, DisclosureMeta, DividerMeta, EmptyStateMeta, EventCalendarMeta, FieldMeta, ForEachMeta, FormMeta, FragmentMeta, GridMeta, IconButtonMeta, IconMeta, ImageLightboxMeta, InlineEditMeta, InputMeta, JsonFieldMeta, KeyValueListMeta, LiveClockMeta, MapPreviewMeta, OrgChartMeta, PageHeadMeta, PaginationMeta, PeriodFilterMeta, PrintSheetMeta, ProgressBarMeta, RadioMeta, RemoteSearchResultsMeta, RowMeta, SDUI_CATEGORIES, SELF_AXIS_PROPS, SearchResultsMeta, SearchableMultiPickerMeta, SectionMeta, SecureScreenMeta, SegmentedControlMeta, SelectMeta, ShowMeta, SidebarNavMeta, SortHandleMeta, SortableListMeta, SpacerMeta, SpinnerMeta, StackedMeterMeta, StatCardMeta, StripMeta, SummaryTableMeta, SwitchMeta, TableMeta, TabsMeta, TagMeta, TagMultiSelectMeta, TextMeta, TextareaMeta, TimePickerMeta, TimelineMeta, ToastMeta, TooltipMeta, TreePickerMeta, TreeViewMeta, allComponentMeta, builtinComponentMeta, coreComponentMeta, dsComponentMeta, getComponentMeta, paletteGroups, richComponentMeta, slotNamesOf, widgetComponentMeta, withSelfAxis, withSelfAxisAll };

package/dist/rich.d.ts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue } from './DatePicker-CPD2cfmG.js';
+export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue, e as TimePicker, T as TimePickerProps } from './DatePicker-D2EtpvkQ.js';
 import './layout-B1QrIBm6.js';
 
 /**

package/dist/rich.js

@@ -1,6 +1,7 @@
-import { useSduiAssetResolver } from './chunk-WGRB5UL4.js';
-import { HoistedStyle } from './chunk-IY7SMV6V.js';
-export { DatePicker, DateRangePicker } from './chunk-IY7SMV6V.js';
+import { useSduiAssetResolver } from './chunk-HPZTFZZN.js';
+export { TimePicker } from './chunk-HPZTFZZN.js';
+import { HoistedStyle } from './chunk-XKLUCUVA.js';
+export { DatePicker, DateRangePicker } from './chunk-XKLUCUVA.js';
 import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
 import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';

package/dist/widgets/AutocompleteField.js

@@ -1,5 +1,5 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-YKROA4XK.js';
-import '../chunk-GUFIEWW2.js';
-import '../chunk-IY7SMV6V.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-SRGXODY2.js';
+import '../chunk-U7ZK7WYH.js';
+import '../chunk-XKLUCUVA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/PeriodFilter.js

@@ -1,4 +1,4 @@
-export { PeriodFilter } from '../chunk-44VLH3I2.js';
-import '../chunk-IY7SMV6V.js';
+export { PeriodFilter } from '../chunk-PFUULIZ2.js';
+import '../chunk-XKLUCUVA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,5 +1,5 @@
-export { SearchableMultiPicker } from '../chunk-J5QWCUDJ.js';
-import '../chunk-GUFIEWW2.js';
-import '../chunk-IY7SMV6V.js';
+export { SearchableMultiPicker } from '../chunk-N5IATDUF.js';
+import '../chunk-U7ZK7WYH.js';
+import '../chunk-XKLUCUVA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/TreePicker.js

@@ -1,6 +1,6 @@
-export { TreePicker } from '../chunk-F5BAER4V.js';
-import '../chunk-TUR4EBKX.js';
-import '../chunk-GUFIEWW2.js';
-import '../chunk-IY7SMV6V.js';
+export { TreePicker } from '../chunk-EQW24SJC.js';
+import '../chunk-IDUN2ESE.js';
+import '../chunk-U7ZK7WYH.js';
+import '../chunk-XKLUCUVA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/TreeView.js

@@ -1,5 +1,5 @@
-export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes } from '../chunk-TUR4EBKX.js';
-import '../chunk-GUFIEWW2.js';
-import '../chunk-IY7SMV6V.js';
+export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes } from '../chunk-IDUN2ESE.js';
+import '../chunk-U7ZK7WYH.js';
+import '../chunk-XKLUCUVA.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.js

@@ -1,5 +1,5 @@
-import { SearchableMultiPicker } from '../chunk-J5QWCUDJ.js';
-export { SearchableMultiPicker } from '../chunk-J5QWCUDJ.js';
+import { SearchableMultiPicker } from '../chunk-N5IATDUF.js';
+export { SearchableMultiPicker } from '../chunk-N5IATDUF.js';
 import { SecureScreen } from '../chunk-IIRENCDS.js';
 export { SecureScreen } from '../chunk-IIRENCDS.js';
 import { StackedMeter } from '../chunk-BMZKZGJF.js';
@@ -12,10 +12,10 @@ import { TagMultiSelect } from '../chunk-QDEZXA34.js';
 export { TagMultiSelect } from '../chunk-QDEZXA34.js';
 import { Timeline } from '../chunk-EFYEOT47.js';
 export { Timeline } from '../chunk-EFYEOT47.js';
-import { TreePicker } from '../chunk-F5BAER4V.js';
-export { TreePicker } from '../chunk-F5BAER4V.js';
-import { TreeView } from '../chunk-TUR4EBKX.js';
-export { TreeView, buildTreeNodes } from '../chunk-TUR4EBKX.js';
+import { TreePicker } from '../chunk-EQW24SJC.js';
+export { TreePicker } from '../chunk-EQW24SJC.js';
+import { TreeView } from '../chunk-IDUN2ESE.js';
+export { TreeView, buildTreeNodes } from '../chunk-IDUN2ESE.js';
 import { EventCalendar } from '../chunk-C3JY6GA3.js';
 export { EventCalendar } from '../chunk-C3JY6GA3.js';
 import { ImageLightbox } from '../chunk-XPBZMECW.js';
@@ -28,14 +28,14 @@ import { LiveClock } from '../chunk-Z3WGIFJP.js';
 export { LiveClock } from '../chunk-Z3WGIFJP.js';
 import { OrgChart } from '../chunk-QWJ3OBBL.js';
 export { OrgChart } from '../chunk-QWJ3OBBL.js';
-import { PeriodFilter } from '../chunk-44VLH3I2.js';
-export { PeriodFilter } from '../chunk-44VLH3I2.js';
+import { PeriodFilter } from '../chunk-PFUULIZ2.js';
+export { PeriodFilter } from '../chunk-PFUULIZ2.js';
 import { PrintSheet } from '../chunk-MYJ2KEIP.js';
 export { PrintSheet } from '../chunk-MYJ2KEIP.js';
 import '../chunk-THEP3VWY.js';
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-YKROA4XK.js';
-import '../chunk-GUFIEWW2.js';
-import '../chunk-IY7SMV6V.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-SRGXODY2.js';
+import '../chunk-U7ZK7WYH.js';
+import '../chunk-XKLUCUVA.js';
 import { ColumnBoard } from '../chunk-C4JRSZGS.js';
 export { ColumnBoard } from '../chunk-C4JRSZGS.js';
 import { DiffView } from '../chunk-LDJ2CFFH.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",

package/dist/chunk-WGRB5UL4.js

@@ -1,99 +0,0 @@
-import { createContext, useContext } from 'react';
-
-// src/adapter.ts
-
-// src/env.ts
-var DEV = (() => {
-  try {
-    const meta = import.meta;
-    return Boolean(meta.env?.DEV);
-  } catch {
-    return false;
-  }
-})();
-
-// src/adapter.ts
-function isSafeNavigationTarget(to) {
-  if (typeof to !== "string") return false;
-  const value = to.replace(/[\u0000-\u0020]/g, "");
-  if (value === "") return false;
-  if (value.startsWith("//")) return false;
-  if (value.startsWith("/") || value.startsWith("?") || value.startsWith("#")) return true;
-  return /^https?:\/\//i.test(value);
-}
-async function defaultFetch(path, init) {
-  const response = await fetch(path, {
-    method: init.method,
-    headers: { "content-type": "application/json", accept: "application/json" },
-    credentials: "include",
-    body: init.body === void 0 ? void 0 : JSON.stringify(init.body),
-    signal: init.signal
-  });
-  const text = await response.text();
-  let json = null;
-  if (text) {
-    try {
-      json = JSON.parse(text);
-    } catch {
-      json = null;
-    }
-  }
-  if (!response.ok) {
-    const message = json && typeof json === "object" && typeof json.message === "string" ? json.message : `\uC694\uCCAD\uC774 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`;
-    throw new Error(message);
-  }
-  return json;
-}
-var defaultAdapter = {
-  navigate: (to) => {
-    if (!isSafeNavigationTarget(to)) {
-      console.error(`[sdui] \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 navigate \uB300\uC0C1: ${String(to)}`);
-      return;
-    }
-    window.location.assign(to);
-  },
-  fetch: defaultFetch,
-  rawFetch: (path) => fetch(path, { credentials: "include" }),
-  // 항등함수. 계약을 문서화하고, 컴포넌트가 `useSduiAssetResolver()`를 조건 없이
-  // 부를 수 있게 하는 것이 전부다. **이 함수 참조 자체가 표식**이기도 하다 —
-  // `assetResolverOf`가 이것과 같은지 보고 "주입 없음"을 판정한다.
-  resolveAsset: (url) => url,
-  invalidate: (prefix) => {
-    if (DEV) console.warn(`[sdui] invalidate \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428 (prefix: ${prefix})`);
-  },
-  refresh: () => {
-    if (DEV) console.warn("[sdui] refresh \uC561\uC158\uC774 \uC5B4\uB311\uD130 \uC5C6\uC774 \uD638\uCD9C\uB428");
-  }
-};
-function resolveAdapter(adapter) {
-  const merged = { ...defaultAdapter };
-  if (adapter) {
-    for (const [key, value] of Object.entries(adapter)) {
-      if (value !== void 0) merged[key] = value;
-    }
-  }
-  return merged;
-}
-var SduiAdapterContext = createContext(null);
-function useSduiAdapter() {
-  return useContext(SduiAdapterContext);
-}
-function assetResolverOf(adapter) {
-  const resolve = adapter?.resolveAsset;
-  if (!resolve || resolve === defaultAdapter.resolveAsset) return null;
-  return resolve;
-}
-function useSduiAssetResolver() {
-  const adapter = useContext(SduiAdapterContext);
-  return adapter?.resolveAsset ?? defaultAdapter.resolveAsset;
-}
-function useSduiSandbox() {
-  return useContext(SduiAdapterContext)?.sandbox === true;
-}
-function hostFetchOf(adapter) {
-  const hostFetch = adapter?.fetch;
-  if (!hostFetch || hostFetch === defaultAdapter.fetch) return null;
-  return hostFetch;
-}
-
-export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };