@x-plat/design-system 0.7.2 → 0.8.1

package/dist/components/TextArea/index.css

@@ -44,6 +44,8 @@
 .lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
   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-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Tooltip/index.cjs

@@ -35,18 +35,13 @@ __export(Tooltip_exports, {
 module.exports = __toCommonJS(Tooltip_exports);
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
-var import_react = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react.default.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = import_react.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
+  return import_react_dom.default.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -68,67 +63,111 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var OFFSET = 12;
+var GAP = 8;
 var SHOW_DELAY = 300;
 var Tooltip = (props) => {
   const {
-    type = "dark",
+    children,
     title,
     description,
-    children,
+    type = "dark",
+    follow = false,
     disabled = false
   } = props;
-  const triggerRef = import_react2.default.useRef(null);
-  const tooltipRef = import_react2.default.useRef(null);
-  const [visible, setVisible] = import_react2.default.useState(false);
-  const [pos, setPos] = import_react2.default.useState({ left: 0, top: 0 });
-  const delayTimer = import_react2.default.useRef(0);
-  const calculatePos = import_react2.default.useCallback((clientX, clientY) => {
+  const triggerRef = import_react.default.useRef(null);
+  const tooltipRef = import_react.default.useRef(null);
+  const [visible, setVisible] = import_react.default.useState(false);
+  const [pos, setPos] = import_react.default.useState({ left: 0, top: 0 });
+  const delayTimer = import_react.default.useRef(0);
+  const rafRef = import_react.default.useRef(0);
+  const cursor = import_react.default.useRef(null);
+  const clamp = import_react.default.useCallback((left, top, w, h) => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    return {
+      left: Math.min(Math.max(GAP, left), Math.max(GAP, vw - w - GAP)),
+      top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
+    };
+  }, []);
+  const placeAtCursor = import_react.default.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
     const h = el.offsetHeight;
-    const vw = window.innerWidth;
-    let left = clientX + OFFSET;
-    let top = clientY - h - OFFSET;
-    if (left + w > vw - 8) left = clientX - w - OFFSET;
-    if (top < 8) top = clientY + OFFSET;
-    if (left < 8) left = 8;
-    setPos({ left, top });
-  }, []);
-  const handleMouseEnter = import_react2.default.useCallback(() => {
+    let left = x + OFFSET;
+    let top = y - h - OFFSET;
+    if (left + w > window.innerWidth - GAP) left = x - w - OFFSET;
+    if (top < GAP) top = y + OFFSET;
+    setPos(clamp(left, top, w, h));
+  }, [clamp]);
+  const placeAtTrigger = import_react.default.useCallback(() => {
+    const el = tooltipRef.current;
+    const trigger = triggerRef.current;
+    if (!el || !trigger) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const rect = trigger.getBoundingClientRect();
+    let top = rect.top - h - GAP;
+    if (top < GAP) top = rect.bottom + GAP;
+    const left = rect.left + rect.width / 2 - w / 2;
+    setPos(clamp(left, top, w, h));
+  }, [clamp]);
+  const reposition = import_react.default.useCallback(() => {
+    if (follow && cursor.current) {
+      placeAtCursor(cursor.current.x, cursor.current.y);
+    } else {
+      placeAtTrigger();
+    }
+  }, [follow, placeAtCursor, placeAtTrigger]);
+  const handleMouseEnter = import_react.default.useCallback((e) => {
     if (disabled) return;
-    delayTimer.current = window.setTimeout(() => {
-      setVisible(true);
-    }, SHOW_DELAY);
+    cursor.current = { x: e.clientX, y: e.clientY };
+    delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = import_react2.default.useCallback((e) => {
-    if (!visible) return;
-    calculatePos(e.clientX, e.clientY);
-  }, [visible, calculatePos]);
-  const handleMouseLeave = import_react2.default.useCallback(() => {
+  const handleMouseMove = import_react.default.useCallback((e) => {
+    cursor.current = { x: e.clientX, y: e.clientY };
+    if (!visible || !follow) return;
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
+    });
+  }, [visible, follow, placeAtCursor]);
+  const close = import_react.default.useCallback(() => {
     window.clearTimeout(delayTimer.current);
+    cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleClick = import_react2.default.useCallback(() => {
-    window.clearTimeout(delayTimer.current);
-    setVisible(false);
-  }, []);
-  const handleFocus = import_react2.default.useCallback(() => {
+  const handleMouseLeave = import_react.default.useCallback(() => {
+    cursor.current = null;
+    close();
+  }, [close]);
+  const handleFocus = import_react.default.useCallback(() => {
     if (disabled) return;
+    cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  const handleBlur = import_react2.default.useCallback(() => {
-    setVisible(false);
+  import_react.default.useLayoutEffect(() => {
+    if (!visible) return;
+    reposition();
+  }, [visible, reposition]);
+  import_react.default.useEffect(() => {
+    if (!visible || follow) return;
+    const onChange = () => placeAtTrigger();
+    window.addEventListener("scroll", onChange, true);
+    window.addEventListener("resize", onChange);
+    return () => {
+      window.removeEventListener("scroll", onChange, true);
+      window.removeEventListener("resize", onChange);
+    };
+  }, [visible, follow, placeAtTrigger]);
+  import_react.default.useEffect(() => () => {
+    window.clearTimeout(delayTimer.current);
+    cancelAnimationFrame(rafRef.current);
   }, []);
-  import_react2.default.useLayoutEffect(() => {
-    if (!visible || !triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    calculatePos(rect.right, rect.top);
-  }, [visible, calculatePos]);
-  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  if (!title && !description) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref: triggerRef,
@@ -136,20 +175,21 @@ var Tooltip = (props) => {
       onMouseEnter: handleMouseEnter,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
+      onClick: close,
       onFocus: handleFocus,
-      onBlur: handleBlur,
+      onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             ref: tooltipRef,
+            role: "tooltip",
             className: clsx_default("lib-xplat-tooltip", type),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })

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

@@ -1,10 +1,18 @@
 import React from 'react';
 
 interface TooltipProps {
-    type?: "dark" | "light";
+    children: React.ReactNode;
     title?: React.ReactNode;
     description?: React.ReactNode;
-    children: React.ReactNode;
+    type?: "dark" | "light";
+    /**
+     * 커서를 따라다닌다. 기본값은 `false` — 트리거 요소 기준으로 고정된다
+     * (PopOver/Dropdown/Select 와 같은 방식).
+     *
+     * 넓은 영역 안에서 **가리키는 지점**이 의미를 가질 때만 켠다. 버튼이나
+     * 아이콘처럼 대상이 작은 경우는 고정이 읽기 편하다.
+     */
+    follow?: boolean;
     disabled?: boolean;
 }
 declare const Tooltip: React.FC<TooltipProps>;

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

@@ -1,10 +1,18 @@
 import React from 'react';
 
 interface TooltipProps {
-    type?: "dark" | "light";
+    children: React.ReactNode;
     title?: React.ReactNode;
     description?: React.ReactNode;
-    children: React.ReactNode;
+    type?: "dark" | "light";
+    /**
+     * 커서를 따라다닌다. 기본값은 `false` — 트리거 요소 기준으로 고정된다
+     * (PopOver/Dropdown/Select 와 같은 방식).
+     *
+     * 넓은 영역 안에서 **가리키는 지점**이 의미를 가질 때만 켠다. 버튼이나
+     * 아이콘처럼 대상이 작은 경우는 고정이 읽기 편하다.
+     */
+    follow?: boolean;
     disabled?: boolean;
 }
 declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/Tooltip/index.js

@@ -1,16 +1,11 @@
 // src/components/Tooltip/Tooltip.tsx
-import React2 from "react";
+import React from "react";
 
 // src/tokens/hooks/Portal.tsx
-import React from "react";
 import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = React.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
+  return ReactDOM.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -32,66 +27,110 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Tooltip/Tooltip.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var OFFSET = 12;
+var GAP = 8;
 var SHOW_DELAY = 300;
 var Tooltip = (props) => {
   const {
-    type = "dark",
+    children,
     title,
     description,
-    children,
+    type = "dark",
+    follow = false,
     disabled = false
   } = props;
-  const triggerRef = React2.useRef(null);
-  const tooltipRef = React2.useRef(null);
-  const [visible, setVisible] = React2.useState(false);
-  const [pos, setPos] = React2.useState({ left: 0, top: 0 });
-  const delayTimer = React2.useRef(0);
-  const calculatePos = React2.useCallback((clientX, clientY) => {
+  const triggerRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(false);
+  const [pos, setPos] = React.useState({ left: 0, top: 0 });
+  const delayTimer = React.useRef(0);
+  const rafRef = React.useRef(0);
+  const cursor = React.useRef(null);
+  const clamp = React.useCallback((left, top, w, h) => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    return {
+      left: Math.min(Math.max(GAP, left), Math.max(GAP, vw - w - GAP)),
+      top: Math.min(Math.max(GAP, top), Math.max(GAP, vh - h - GAP))
+    };
+  }, []);
+  const placeAtCursor = React.useCallback((x, y) => {
     const el = tooltipRef.current;
     if (!el) return;
     const w = el.offsetWidth;
     const h = el.offsetHeight;
-    const vw = window.innerWidth;
-    let left = clientX + OFFSET;
-    let top = clientY - h - OFFSET;
-    if (left + w > vw - 8) left = clientX - w - OFFSET;
-    if (top < 8) top = clientY + OFFSET;
-    if (left < 8) left = 8;
-    setPos({ left, top });
-  }, []);
-  const handleMouseEnter = React2.useCallback(() => {
+    let left = x + OFFSET;
+    let top = y - h - OFFSET;
+    if (left + w > window.innerWidth - GAP) left = x - w - OFFSET;
+    if (top < GAP) top = y + OFFSET;
+    setPos(clamp(left, top, w, h));
+  }, [clamp]);
+  const placeAtTrigger = React.useCallback(() => {
+    const el = tooltipRef.current;
+    const trigger = triggerRef.current;
+    if (!el || !trigger) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const rect = trigger.getBoundingClientRect();
+    let top = rect.top - h - GAP;
+    if (top < GAP) top = rect.bottom + GAP;
+    const left = rect.left + rect.width / 2 - w / 2;
+    setPos(clamp(left, top, w, h));
+  }, [clamp]);
+  const reposition = React.useCallback(() => {
+    if (follow && cursor.current) {
+      placeAtCursor(cursor.current.x, cursor.current.y);
+    } else {
+      placeAtTrigger();
+    }
+  }, [follow, placeAtCursor, placeAtTrigger]);
+  const handleMouseEnter = React.useCallback((e) => {
     if (disabled) return;
-    delayTimer.current = window.setTimeout(() => {
-      setVisible(true);
-    }, SHOW_DELAY);
+    cursor.current = { x: e.clientX, y: e.clientY };
+    delayTimer.current = window.setTimeout(() => setVisible(true), SHOW_DELAY);
   }, [disabled]);
-  const handleMouseMove = React2.useCallback((e) => {
-    if (!visible) return;
-    calculatePos(e.clientX, e.clientY);
-  }, [visible, calculatePos]);
-  const handleMouseLeave = React2.useCallback(() => {
-    window.clearTimeout(delayTimer.current);
-    setVisible(false);
-  }, []);
-  const handleClick = React2.useCallback(() => {
+  const handleMouseMove = React.useCallback((e) => {
+    cursor.current = { x: e.clientX, y: e.clientY };
+    if (!visible || !follow) return;
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      if (cursor.current) placeAtCursor(cursor.current.x, cursor.current.y);
+    });
+  }, [visible, follow, placeAtCursor]);
+  const close = React.useCallback(() => {
     window.clearTimeout(delayTimer.current);
+    cancelAnimationFrame(rafRef.current);
     setVisible(false);
   }, []);
-  const handleFocus = React2.useCallback(() => {
+  const handleMouseLeave = React.useCallback(() => {
+    cursor.current = null;
+    close();
+  }, [close]);
+  const handleFocus = React.useCallback(() => {
     if (disabled) return;
+    cursor.current = null;
     setVisible(true);
   }, [disabled]);
-  const handleBlur = React2.useCallback(() => {
-    setVisible(false);
+  React.useLayoutEffect(() => {
+    if (!visible) return;
+    reposition();
+  }, [visible, reposition]);
+  React.useEffect(() => {
+    if (!visible || follow) return;
+    const onChange = () => placeAtTrigger();
+    window.addEventListener("scroll", onChange, true);
+    window.addEventListener("resize", onChange);
+    return () => {
+      window.removeEventListener("scroll", onChange, true);
+      window.removeEventListener("resize", onChange);
+    };
+  }, [visible, follow, placeAtTrigger]);
+  React.useEffect(() => () => {
+    window.clearTimeout(delayTimer.current);
+    cancelAnimationFrame(rafRef.current);
   }, []);
-  React2.useLayoutEffect(() => {
-    if (!visible || !triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    calculatePos(rect.right, rect.top);
-  }, [visible, calculatePos]);
-  if (!title && !description) return /* @__PURE__ */ jsx2(Fragment, { children });
+  if (!title && !description) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -100,20 +139,21 @@ var Tooltip = (props) => {
       onMouseEnter: handleMouseEnter,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
+      onClick: close,
       onFocus: handleFocus,
-      onBlur: handleBlur,
+      onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsxs(
+        visible && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: tooltipRef,
+            role: "tooltip",
             className: clsx_default("lib-xplat-tooltip", type),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx2("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx2("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })