@x-plat/design-system 0.10.0 → 0.12.0

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

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { V as Validation } from '../../validation-Dqo1zqhT.js';
+
+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 };

package/dist/components/TimePicker/index.js

@@ -0,0 +1,424 @@
+// src/components/TimePicker/TimePicker.tsx
+import React4 from "react";
+
+// src/tokens/hooks/Portal.tsx
+import ReactDOM from "react-dom";
+var Portal = ({ children }) => {
+  if (typeof document === "undefined") return null;
+  return ReactDOM.createPortal(children, document.body);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
+// src/tokens/hooks/useAutoPosition.ts
+import React from "react";
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const [position, setPosition] = React.useState({
+    position: {},
+    direction: "bottom",
+    repositioning: false
+  });
+  const placedRef = React.useRef(false);
+  const calculatePosition = React.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]);
+  React.useLayoutEffect(() => {
+    if (!enabled) {
+      placedRef.current = false;
+      return;
+    }
+    calculatePosition();
+    const raf = requestAnimationFrame(calculatePosition);
+    return () => cancelAnimationFrame(raf);
+  }, [calculatePosition, enabled]);
+  React.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  React.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
+import React2 from "react";
+var useClickOutside = (refs, handler, enabled = true) => {
+  React2.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
+import React3 from "react";
+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) => {
+  React3.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
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/status/InfoIcon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfoIcon = () => /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs2("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(
+          "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__ */ jsx2(
+          "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__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ jsx2("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/status/SuccessIcon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ jsx3(
+      "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
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ICON = {
+  default: /* @__PURE__ */ jsx4(InfoIcon_default, {}),
+  success: /* @__PURE__ */ jsx4(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ jsx4(InfoIcon_default, {}),
+  error: /* @__PURE__ */ jsx4(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ jsx4("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ jsx4("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__ */ jsx4(Fragment, { children });
+  return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
+    children,
+    hasMessages && /* @__PURE__ */ jsx4(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/TimePicker/TimePicker.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "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 = React4.useId();
+  const triggerRef = React4.useRef(null);
+  const contentRef = React4.useRef(null);
+  const [isOpen, setOpen] = React4.useState(false);
+  const [mounted, setMounted] = React4.useState(false);
+  const [visible, setVisible] = React4.useState(false);
+  const options = React4.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 = React4.useCallback(() => setOpen(false), []);
+  useClickOutside_default([triggerRef, contentRef], close, isOpen);
+  useEscapeKey(isOpen, () => {
+    close();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  const position = useAutoPosition_default(triggerRef, contentRef, mounted);
+  React4.useEffect(() => {
+    if (disabled && isOpen) setOpen(false);
+  }, [disabled, isOpen]);
+  React4.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__ */ jsxs4("div", { className: clsx_default("lib-xplat-time-picker", size, disabled && "disabled"), children: [
+    /* @__PURE__ */ jsx5(
+      "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__ */ jsx5("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
+      }
+    ),
+    mounted && /* @__PURE__ */ jsx5(Portal_default, { children: /* @__PURE__ */ jsx5(
+      "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__ */ jsx5(
+          "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__ */ jsx5(Field, { validations, label, required, htmlFor: fieldId, children: control });
+};
+TimePicker.displayName = "TimePicker";
+var TimePicker_default = TimePicker;
+export {
+  TimePicker_default as TimePicker
+};