@x-plat/design-system 0.10.0 → 0.12.0

package/dist/components/TimePicker/index.cjs

@@ -0,0 +1,461 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/TimePicker/index.ts
+var TimePicker_exports = {};
+__export(TimePicker_exports, {
+  TimePicker: () => TimePicker_default
+});
+module.exports = __toCommonJS(TimePicker_exports);
+
+// src/components/TimePicker/TimePicker.tsx
+var import_react4 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/Portal.tsx
+var import_react_dom = __toESM(require("react-dom"), 1);
+var Portal = ({ children }) => {
+  if (typeof document === "undefined") return null;
+  return import_react_dom.default.createPortal(children, document.body);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+var import_react = __toESM(require("react"), 1);
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const [position, setPosition] = import_react.default.useState({
+    position: {},
+    direction: "bottom",
+    repositioning: false
+  });
+  const placedRef = import_react.default.useRef(false);
+  const calculatePosition = import_react.default.useCallback(() => {
+    if (!triggerRef.current || !popRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popW = popRef.current.offsetWidth;
+    const popH = popRef.current.offsetHeight;
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
+    let direction = "bottom";
+    let top;
+    let left;
+    if (triggerRect.bottom + popH > viewportHeight && triggerRect.top - popH > 0) {
+      direction = "top";
+      top = triggerRect.top - popH;
+    } else {
+      top = triggerRect.bottom;
+    }
+    left = triggerRect.left;
+    if (left + popW > viewportWidth - 8) {
+      left = triggerRect.right - popW;
+    }
+    if (left < 8) left = 8;
+    setPosition({
+      position: { top, left },
+      direction,
+      repositioning: placedRef.current
+    });
+    placedRef.current = true;
+  }, [triggerRef, popRef]);
+  import_react.default.useLayoutEffect(() => {
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
+    calculatePosition();
+    const raf = requestAnimationFrame(calculatePosition);
+    return () => cancelAnimationFrame(raf);
+  }, [calculatePosition, enabled]);
+  import_react.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  import_react.default.useEffect(() => {
+    if (!enabled) return;
+    let raf = 0;
+    const onScrollOrResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calculatePosition);
+    };
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
+    };
+  }, [calculatePosition, enabled]);
+  return position;
+};
+var useAutoPosition_default = useAutoPosition;
+
+// src/tokens/hooks/useClickOutside.ts
+var import_react2 = __toESM(require("react"), 1);
+var useClickOutside = (refs, handler, enabled = true) => {
+  import_react2.default.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react3 = __toESM(require("react"), 1);
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  import_react3.default.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/tokens/svg/status/ErrorIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/status/InfoIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/status/SuccessIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// src/components/FieldMessage/FieldMessage.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ICON = {
+  default: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
+  success: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
+  error: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var Field = (props) => {
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
+    children,
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/TimePicker/TimePicker.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ANIMATION_DURATION_MS = 200;
+var toMinutes = (hhmm) => {
+  if (!hhmm) return null;
+  const m = /^(\d{1,2}):(\d{2})$/.exec(hhmm.trim());
+  if (!m) return null;
+  const h = Number(m[1]);
+  const min = Number(m[2]);
+  if (h > 23 || min > 59) return null;
+  return h * 60 + min;
+};
+var toHHmm = (minutes) => `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+var display = (hhmm, use12Hours) => {
+  if (!use12Hours) return hhmm;
+  const total = toMinutes(hhmm);
+  if (total === null) return hhmm;
+  const h24 = Math.floor(total / 60);
+  const mm = String(total % 60).padStart(2, "0");
+  const period = h24 < 12 ? "\uC624\uC804" : "\uC624\uD6C4";
+  const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
+  return `${period} ${h12}:${mm}`;
+};
+var TimePicker = (props) => {
+  const {
+    value,
+    onChange,
+    step = 30,
+    min,
+    max,
+    use12Hours = false,
+    placeholder = "\uC2DC\uAC01 \uC120\uD0DD",
+    disabled = false,
+    size = "md",
+    label,
+    required,
+    validations
+  } = props;
+  const fieldId = import_react4.default.useId();
+  const triggerRef = import_react4.default.useRef(null);
+  const contentRef = import_react4.default.useRef(null);
+  const [isOpen, setOpen] = import_react4.default.useState(false);
+  const [mounted, setMounted] = import_react4.default.useState(false);
+  const [visible, setVisible] = import_react4.default.useState(false);
+  const options = import_react4.default.useMemo(() => {
+    const safeStep = step > 0 && step <= 720 ? step : 30;
+    const lo = toMinutes(min) ?? 0;
+    const hi = toMinutes(max) ?? 24 * 60 - 1;
+    const out = [];
+    for (let t = lo; t <= hi; t += safeStep) out.push(toHHmm(t));
+    return out;
+  }, [step, min, max]);
+  const close = import_react4.default.useCallback(() => setOpen(false), []);
+  useClickOutside_default([triggerRef, contentRef], close, isOpen);
+  useEscapeKey(isOpen, () => {
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  import_react4.default.useEffect(() => {
+    if (disabled && isOpen) setOpen(false);
+  }, [disabled, isOpen]);
+  import_react4.default.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  const pick = (hhmm) => {
+    onChange?.(hhmm);
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  };
+  const control = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-time-picker", size, disabled && "disabled"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        id: fieldId,
+        ref: triggerRef,
+        className: clsx_default("time-picker-trigger", hasError(validations) && "error"),
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-invalid": hasError(validations) || void 0,
+        tabIndex: disabled ? void 0 : 0,
+        onClick: () => !disabled && setOpen((p) => !p),
+        onKeyDown: (e) => {
+          if (disabled) return;
+          if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
+      }
+    ),
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ref: contentRef,
+        className: clsx_default("lib-xplat-time-picker-content", size, visible ? "enter" : "exit", position.repositioning && "repositioning"),
+        style: { ...position.position, width: triggerRef.current?.offsetWidth },
+        role: "listbox",
+        children: options.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: clsx_default("time-picker-item", t === value && "is-selected"),
+            role: "option",
+            "aria-selected": t === value,
+            tabIndex: 0,
+            onClick: () => pick(t),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                pick(t);
+              }
+            },
+            children: display(t, use12Hours)
+          },
+          t
+        ))
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
+};
+TimePicker.displayName = "TimePicker";
+var TimePicker_default = TimePicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimePicker
+});

package/dist/components/TimePicker/index.css

@@ -0,0 +1,175 @@
+/* src/components/FieldMessage/fieldMessage.scss */
+.lib-xplat-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-field-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-field-message-wrap {
+  display: flex;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message {
+  display: flex;
+  gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  align-items: center;
+  user-select: none;
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.default {
+  color: var(--semantic-icon-secondary);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.success {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.warning {
+  color: var(--semantic-text-warning);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.error {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message > .icon {
+  font-size: var(--semantic-typo-label-2-m-size);
+}
+
+/* src/components/TimePicker/timePicker.scss */
+.lib-xplat-time-picker {
+  position: relative;
+  width: 100%;
+}
+.lib-xplat-time-picker .time-picker-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border: 1px solid var(--semantic-border-primary);
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
+  padding: 0 var(--spacing-space-3);
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-time-picker .time-picker-trigger:hover {
+  border-color: var(--semantic-border-tertiary);
+}
+.lib-xplat-time-picker .time-picker-trigger:focus-visible {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.lib-xplat-time-picker .time-picker-trigger.error {
+  border-color: var(--semantic-border-error);
+}
+.lib-xplat-time-picker .time-picker-value.placeholder {
+  color: var(--semantic-text-tertiary);
+}
+.lib-xplat-time-picker.sm .time-picker-trigger {
+  height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+}
+.lib-xplat-time-picker.md .time-picker-trigger {
+  height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+}
+.lib-xplat-time-picker.lg .time-picker-trigger {
+  height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
+}
+.lib-xplat-time-picker.disabled .time-picker-trigger {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: var(--semantic-surface-neutral-disabled);
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-time-picker-content {
+  position: fixed;
+  z-index: 1000;
+  max-height: 220px;
+  overflow-y: auto;
+  padding: var(--spacing-space-1) 0;
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-primary);
+  box-shadow: var(--semantic-shadow-md);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.lib-xplat-time-picker-content.enter {
+  opacity: 1;
+}
+.lib-xplat-time-picker-content.exit {
+  opacity: 0;
+}
+.lib-xplat-time-picker-content .time-picker-item {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  cursor: pointer;
+  outline: none;
+  color: var(--semantic-text-primary);
+  font-variant-numeric: tabular-nums;
+  transition: background-color 0.15s ease;
+}
+.lib-xplat-time-picker-content .time-picker-item:hover,
+.lib-xplat-time-picker-content .time-picker-item:focus-visible {
+  background-color: var(--semantic-surface-neutral-secondary);
+}
+.lib-xplat-time-picker-content .time-picker-item.is-selected {
+  color: var(--semantic-text-brand-primary);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
+}
+.lib-xplat-time-picker-content.sm .time-picker-item {
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+}
+.lib-xplat-time-picker-content.md .time-picker-item {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+}
+.lib-xplat-time-picker-content.lg .time-picker-item {
+  font-family: var(--semantic-typo-label-1-m-font);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
+}
+.lib-xplat-time-picker-content.repositioning {
+  transition: none;
+}

package/dist/components/TimePicker/index.d.cts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
+
+type TimePickerSize = "sm" | "md" | "lg";
+interface TimePickerProps {
+    /** `"HH:mm"` 24시간 표기. 비어 있으면 placeholder 가 보인다 */
+    value?: string;
+    /** 시각을 고르면 `"HH:mm"` 로 준다 */
+    onChange?: (value: string) => void;
+    /** 목록 간격(분). 기본 30 — 30이면 하루 48개가 나온다 */
+    step?: number;
+    /** 고를 수 있는 가장 이른 시각 `"HH:mm"` */
+    min?: string;
+    /** 고를 수 있는 가장 늦은 시각 `"HH:mm"` */
+    max?: string;
+    /** 오전/오후 12시간 표기로 보여준다. onChange 는 그대로 24시간 `"HH:mm"` */
+    use12Hours?: boolean;
+    /** 비어 있을 때 표시할 안내 글자 */
+    placeholder?: string;
+    disabled?: boolean;
+    size?: TimePickerSize;
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+}
+/**
+ * 시각을 고르는 드롭다운.
+ *
+ * `DatePicker` 는 날짜 전용이다. 날짜와 시각이 함께 필요하면 둘을 나란히 두고
+ * 호출부에서 합친다 — `DatePicker` 에 시간을 끼워 넣으면 하위 4종의 날짜 전용
+ * 비교 로직을 전부 건드려야 해서 기존 사용처가 깨질 위험이 크다.
+ */
+declare const TimePicker: {
+    (props: TimePickerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { TimePicker };