@dotss/ui 0.0.8 → 0.0.11

package/Tooltip/Tooltip.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("@emotion/react/jsx-runtime"),s=require("react"),$=require("../Flexbox/Flexbox.cjs"),I=require("../Icon/Icon.cjs"),z=require("../Typography/Typography.cjs"),M=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),X=require("@emotion/styled"),N=t=>t&&t.__esModule?t:{default:t},q=N(X),F=q.default.div`
+  position: relative;
+  display: inline-block;
+  &[open] > .tooltip {
+    display: flex;
+  }
+`,H=q.default.div`
+  position: absolute;
+  display: none;
+  flex-direction: column;
+  gap: ${({theme:{spacing:t}})=>`${t.content(1)}px`};
+  padding: ${({theme:{spacing:t}})=>`${t.content(3)}px`};
+  border-radius: 8px;
+  width: auto;
+  height: auto;
+  max-width: 300px;
+  max-height: calc(136px - 8px);
+  z-index: 100003;
+  white-space: nowrap;
+  word-break: break-all;
+
+  ${({theme:{palette:{brand:t,grey:r}},color:f})=>{let e={};return f==="primary"&&(e={backgroundColor:t.primary.tooltip,color:r[100]}),f==="secondary"&&(e={backgroundColor:r[80],color:r.white}),e}}
+
+  ${({theme:{typography:t}})=>({fontSize:t.b4R.size,fontWeight:t.b4R.weight,lineHeight:t.b4R.lineHeight,letterSpacing:t.b4R.letterSpacing,"& svg:not(.tooltip-closer)":{width:24,height:24}})};
+
+  ${({theme:{palette:{brand:t,grey:r}},placement:f,color:e,offset:c,arrowOffset:d})=>{let o={};const n=(c==null?void 0:c.x)||0,p=(c==null?void 0:c.y)||0,l=(d==null?void 0:d.x)||0,a=(d==null?void 0:d.y)||0;switch(f){case"bottom-left":o={top:`calc(-12px + ${p}px)`,left:`calc(-6px + ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",left:`calc(12px + ${l}px)`,borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-center":o={top:`calc(-12px + ${p}px)`,left:"50%",transform:`translate(calc(-50% + ${n}px), -100%)`,"&:after":{content:'""',position:"absolute",top:"100%",left:`calc(50% + ${l}px)`,transform:"translateX(-50%)",borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-right":o={top:`calc(-12px + ${p}px)`,right:`calc(-6px - ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",right:`calc(12px - ${l}px)`,borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"left-top":o={top:`calc(-6px + ${p}px)`,left:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",top:`calc(12px + ${a}px)`,right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-middle":o={top:"50%",left:`calc(100% + 12px + ${n}px)`,transform:`translateY(calc(-50% + ${p}px))`,"&:after":{content:'""',position:"absolute",top:`calc(50% + ${a}px)`,right:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-bottom":o={bottom:`calc(-6px - ${p}px)`,left:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",bottom:`calc(12px - ${a}px)`,right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"top-left":o={left:`calc(-6px + ${n}px)`,transform:`translate(0, calc(12px + ${p}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(12px + ${l}px)`,borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-center":o={right:"50%",transform:`translate(calc(50% + ${n}px), calc(12px + ${p}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(50% + ${l}px)`,transform:"translateX(-50%)",borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-right":o={right:`calc(-6px - ${n}px)`,transform:`translate(0, calc(12px + ${p}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",right:`calc(12px - ${l}px)`,borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"right-top":o={top:`calc(-6px + ${p}px)`,right:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",top:`calc(12px + ${a}px)`,left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-middle":o={top:"50%",right:`calc(100% + 12px + ${n}px)`,transform:`translateY(calc(-50% + ${p}px))`,"&:after":{content:'""',position:"absolute",top:`calc(50% + ${a}px)`,left:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-bottom":o={bottom:`calc(-6px - ${p}px)`,right:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",bottom:`calc(12px - ${a}px)`,left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break}return o}};
+`,V=s.forwardRef(function({children:r,placement:f="bottom-center",color:e="primary",title:c,body:d,closer:o,endAdornment:n,inlineCSS:p,open:l=!1,onClose:a,wrapperProps:y,offset:E,arrowOffset:K,...g},Y){const C=s.useId(),T=s.useId(),L=s.useId(),{isKeyboardMode:k}=M.default(),S=s.useRef(null),R=s.useRef(null),v=s.useRef(!0),[D,_]=s.useState(!1),w=(g==null?void 0:g.id)||C,B=i=>{(i.key==="Enter"||i.key===" ")&&(a==null||a(i))};return s.useEffect(()=>{R.current&&R.current.getBoundingClientRect().width>=276&&_(!0)},[l]),s.useEffect(()=>{const i=u=>{u.key==="Escape"&&l&&(u.stopPropagation(),a==null||a(u))};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[l,a]),s.useEffect(()=>{var u,m,b;if(v.current){v.current=!1;return}if(l){const h=(u=S.current)==null?void 0:u.querySelector('.tooltip-closer[role="button"]');if(h&&k&&h.focus(),!h){const j=(m=S.current)==null?void 0:m.querySelector('[role="button"]');j&&k&&j.focus()}return}const i=(b=S.current)==null?void 0:b.querySelector('[role="button"]');i&&k&&i.focus()},[l,k]),x.jsxs(F,{ref:S,open:l,...y,css:y==null?void 0:y.inlineCSS,children:[s.Children.map(r,i=>{if(!s.isValidElement(i))return i;const u=m=>{var b,h;(m.key==="Enter"||m.key===" ")&&((h=(b=i.props)==null?void 0:b.onClick)==null||h.call(b,m))};return s.cloneElement(i,{inlineCSS:{cursor:"pointer","&:active":{outline:"none"},...i.props.inlineCSS},role:"button",tabIndex:0,"aria-hidden":!1,"aria-expanded":l,"aria-haspopup":"dialog","aria-controls":w,focusable:!0,onKeyDown:u,...i.props})}),x.jsxs(H,{id:w,className:"tooltip",role:"dialog","aria-modal":"true","aria-labelledby":c?T:void 0,"aria-describedby":d?L:void 0,ref:Y,placement:f,color:e,offset:E,arrowOffset:K,...g,css:p,children:[c&&x.jsxs($.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[x.jsx(z.default,{id:T,variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:c}),o&&x.jsx($.default,{flexShrink:0,children:x.jsx(I.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:B,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]}),d&&x.jsxs($.default,{id:L,alignItems:"center",gap:2,ref:R,style:D?{width:"276px",whiteSpace:"wrap"}:{},children:[d,n&&x.jsx($.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:n}),!c&&o&&x.jsx($.default,{flexShrink:0,children:x.jsx(I.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:B,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]})]})]})});exports.default=V;

package/{dist/Tooltip → Tooltip}/Tooltip.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 import { BrandColorKey } from '../typings/color';
 import { GeneralComponentProps } from '../typings/component';
 
+export interface TooltipOffset {
+    x?: number;
+    y?: number;
+}
 export interface TooltipProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'title'>> {
     placement?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-middle' | 'left-bottom' | 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-middle' | 'right-bottom';
     color?: BrandColorKey;
@@ -10,9 +14,10 @@ export interface TooltipProps extends GeneralComponentProps<Omit<HTMLAttributes<
     endAdornment?: ReactNode;
     open?: boolean;
     closer?: boolean;
-    onOpen?: MouseEventHandler;
-    onClose?: MouseEventHandler;
+    onClose?: (e: SyntheticEvent) => void;
     wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    offset?: TooltipOffset;
+    arrowOffset?: TooltipOffset;
 }
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/Tooltip/Tooltip.es.js

@@ -0,0 +1,443 @@
+import { jsxs as S, jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as H, useId as L, useRef as T, useState as M, useEffect as w, Children as V, isValidElement as W, cloneElement as G } from "react";
+import h from "../Flexbox/Flexbox.es.js";
+import C from "../Icon/Icon.es.js";
+import J from "../Typography/Typography.es.js";
+import Q from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import z from "@emotion/styled";
+const U = z.div`
+  position: relative;
+  display: inline-block;
+  &[open] > .tooltip {
+    display: flex;
+  }
+`, Z = z.div`
+  position: absolute;
+  display: none;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: t } }) => `${t.content(1)}px`};
+  padding: ${({ theme: { spacing: t } }) => `${t.content(3)}px`};
+  border-radius: 8px;
+  width: auto;
+  height: auto;
+  max-width: 300px;
+  max-height: calc(136px - 8px);
+  z-index: 100003;
+  white-space: nowrap;
+  word-break: break-all;
+
+  ${({
+  theme: {
+    palette: { brand: t, grey: e }
+  },
+  color: b
+}) => {
+  let r = {};
+  return b === "primary" && (r = {
+    backgroundColor: t.primary.tooltip,
+    color: e[100]
+  }), b === "secondary" && (r = {
+    backgroundColor: e[80],
+    color: e.white
+  }), r;
+}}
+
+  ${({ theme: { typography: t } }) => ({
+  fontSize: t.b4R.size,
+  fontWeight: t.b4R.weight,
+  lineHeight: t.b4R.lineHeight,
+  letterSpacing: t.b4R.letterSpacing,
+  "& svg:not(.tooltip-closer)": {
+    width: 24,
+    height: 24
+  }
+})};
+
+  ${({
+  theme: {
+    palette: { brand: t, grey: e }
+  },
+  placement: b,
+  color: r,
+  offset: s,
+  arrowOffset: c
+}) => {
+  let o = {};
+  const n = (s == null ? void 0 : s.x) || 0, p = (s == null ? void 0 : s.y) || 0, l = (c == null ? void 0 : c.x) || 0, a = (c == null ? void 0 : c.y) || 0;
+  switch (b) {
+    case "bottom-left":
+      o = {
+        top: `calc(-12px + ${p}px)`,
+        left: `calc(-6px + ${n}px)`,
+        transform: "translateY(-100%)",
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: "100%",
+          left: `calc(12px + ${l}px)`,
+          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderRight: "6px solid transparent",
+          borderBottom: "8px solid transparent",
+          borderLeft: "6px solid transparent"
+        }
+      };
+      break;
+    case "bottom-center":
+      o = {
+        top: `calc(-12px + ${p}px)`,
+        left: "50%",
+        transform: `translate(calc(-50% + ${n}px), -100%)`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: "100%",
+          left: `calc(50% + ${l}px)`,
+          transform: "translateX(-50%)",
+          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderRight: "6px solid transparent",
+          borderBottom: "8px solid transparent",
+          borderLeft: "6px solid transparent"
+        }
+      };
+      break;
+    case "bottom-right":
+      o = {
+        top: `calc(-12px + ${p}px)`,
+        right: `calc(-6px - ${n}px)`,
+        transform: "translateY(-100%)",
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: "100%",
+          right: `calc(12px - ${l}px)`,
+          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderRight: "6px solid transparent",
+          borderBottom: "8px solid transparent",
+          borderLeft: "6px solid transparent"
+        }
+      };
+      break;
+    case "left-top":
+      o = {
+        top: `calc(-6px + ${p}px)`,
+        left: `calc(100% + 12px + ${n}px)`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: `calc(12px + ${a}px)`,
+          right: "100%",
+          borderTop: "6px solid transparent",
+          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderBottom: "6px solid transparent",
+          borderLeft: "8px solid transparent"
+        }
+      };
+      break;
+    case "left-middle":
+      o = {
+        top: "50%",
+        left: `calc(100% + 12px + ${n}px)`,
+        transform: `translateY(calc(-50% + ${p}px))`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: `calc(50% + ${a}px)`,
+          right: "100%",
+          transform: "translateY(-50%)",
+          borderTop: "6px solid transparent",
+          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderBottom: "6px solid transparent",
+          borderLeft: "8px solid transparent"
+        }
+      };
+      break;
+    case "left-bottom":
+      o = {
+        bottom: `calc(-6px - ${p}px)`,
+        left: `calc(100% + 12px + ${n}px)`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          bottom: `calc(12px - ${a}px)`,
+          right: "100%",
+          borderTop: "6px solid transparent",
+          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderBottom: "6px solid transparent",
+          borderLeft: "8px solid transparent"
+        }
+      };
+      break;
+    case "top-left":
+      o = {
+        left: `calc(-6px + ${n}px)`,
+        transform: `translate(0, calc(12px + ${p}px))`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          bottom: "100%",
+          left: `calc(12px + ${l}px)`,
+          borderTop: "8px solid transparent",
+          borderRight: "6px solid transparent",
+          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderLeft: "6px solid transparent"
+        }
+      };
+      break;
+    case "top-center":
+      o = {
+        right: "50%",
+        transform: `translate(calc(50% + ${n}px), calc(12px + ${p}px))`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          bottom: "100%",
+          left: `calc(50% + ${l}px)`,
+          transform: "translateX(-50%)",
+          borderTop: "8px solid transparent",
+          borderRight: "6px solid transparent",
+          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderLeft: "6px solid transparent"
+        }
+      };
+      break;
+    case "top-right":
+      o = {
+        right: `calc(-6px - ${n}px)`,
+        transform: `translate(0, calc(12px + ${p}px))`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          bottom: "100%",
+          right: `calc(12px - ${l}px)`,
+          borderTop: "8px solid transparent",
+          borderRight: "6px solid transparent",
+          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
+          borderLeft: "6px solid transparent"
+        }
+      };
+      break;
+    case "right-top":
+      o = {
+        top: `calc(-6px + ${p}px)`,
+        right: `calc(100% + 12px + ${n}px)`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: `calc(12px + ${a}px)`,
+          left: "100%",
+          borderTop: "6px solid transparent",
+          borderRight: "8px solid transparent",
+          borderBottom: "6px solid transparent",
+          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`
+        }
+      };
+      break;
+    case "right-middle":
+      o = {
+        top: "50%",
+        right: `calc(100% + 12px + ${n}px)`,
+        transform: `translateY(calc(-50% + ${p}px))`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          top: `calc(50% + ${a}px)`,
+          left: "100%",
+          transform: "translateY(-50%)",
+          borderTop: "6px solid transparent",
+          borderRight: "8px solid transparent",
+          borderBottom: "6px solid transparent",
+          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`
+        }
+      };
+      break;
+    case "right-bottom":
+      o = {
+        bottom: `calc(-6px - ${p}px)`,
+        right: `calc(100% + 12px + ${n}px)`,
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          bottom: `calc(12px - ${a}px)`,
+          left: "100%",
+          borderTop: "6px solid transparent",
+          borderRight: "8px solid transparent",
+          borderBottom: "6px solid transparent",
+          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`
+        }
+      };
+      break;
+  }
+  return o;
+}};
+`, ot = H(function({
+  children: e,
+  placement: b = "bottom-center",
+  color: r = "primary",
+  title: s,
+  body: c,
+  closer: o,
+  endAdornment: n,
+  inlineCSS: p,
+  open: l = !1,
+  onClose: a,
+  wrapperProps: $,
+  offset: D,
+  arrowOffset: j,
+  ...y
+}, X) {
+  const q = L(), B = L(), v = L(), { isKeyboardMode: g } = Q(), k = T(null), R = T(null), I = T(!0), [N, F] = M(!1), E = (y == null ? void 0 : y.id) || q, K = (i) => {
+    (i.key === "Enter" || i.key === " ") && (a == null || a(i));
+  };
+  return w(() => {
+    R.current && R.current.getBoundingClientRect().width >= 276 && F(!0);
+  }, [l]), w(() => {
+    const i = (d) => {
+      d.key === "Escape" && l && (d.stopPropagation(), a == null || a(d));
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [l, a]), w(() => {
+    var d, m, x;
+    if (I.current) {
+      I.current = !1;
+      return;
+    }
+    if (l) {
+      const f = (d = k.current) == null ? void 0 : d.querySelector(
+        '.tooltip-closer[role="button"]'
+      );
+      if (f && g && f.focus(), !f) {
+        const Y = (m = k.current) == null ? void 0 : m.querySelector('[role="button"]');
+        Y && g && Y.focus();
+      }
+      return;
+    }
+    const i = (x = k.current) == null ? void 0 : x.querySelector('[role="button"]');
+    i && g && i.focus();
+  }, [l, g]), /* @__PURE__ */ S(
+    U,
+    {
+      ref: k,
+      open: l,
+      ...$,
+      css: $ == null ? void 0 : $.inlineCSS,
+      children: [
+        V.map(e, (i) => {
+          if (!W(i))
+            return i;
+          const d = (m) => {
+            var x, f;
+            (m.key === "Enter" || m.key === " ") && ((f = (x = i.props) == null ? void 0 : x.onClick) == null || f.call(x, m));
+          };
+          return G(i, {
+            inlineCSS: {
+              cursor: "pointer",
+              "&:active": {
+                outline: "none"
+              },
+              ...i.props.inlineCSS
+            },
+            role: "button",
+            tabIndex: 0,
+            "aria-hidden": !1,
+            "aria-expanded": l,
+            "aria-haspopup": "dialog",
+            "aria-controls": E,
+            focusable: !0,
+            onKeyDown: d,
+            ...i.props
+          });
+        }),
+        /* @__PURE__ */ S(
+          Z,
+          {
+            id: E,
+            className: "tooltip",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": s ? B : void 0,
+            "aria-describedby": c ? v : void 0,
+            ref: X,
+            placement: b,
+            color: r,
+            offset: D,
+            arrowOffset: j,
+            ...y,
+            css: p,
+            children: [
+              s && /* @__PURE__ */ S(h, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
+                /* @__PURE__ */ u(
+                  J,
+                  {
+                    id: B,
+                    variant: "h5B",
+                    color: r === "primary" ? "grey.100" : "grey.white",
+                    children: s
+                  }
+                ),
+                o && /* @__PURE__ */ u(h, { flexShrink: 0, children: /* @__PURE__ */ u(
+                  C,
+                  {
+                    className: "tooltip-closer",
+                    name: "CloseLine",
+                    size: "xSmall",
+                    color: r === "primary" ? "grey.100" : "grey.white",
+                    role: "button",
+                    "aria-hidden": "false",
+                    focusable: "true",
+                    tabIndex: 0,
+                    onClick: a,
+                    onKeyDown: K,
+                    "aria-label": "닫기",
+                    inlineCSS: {
+                      marginLeft: "2px",
+                      cursor: "pointer",
+                      "&:active": { outline: "none" }
+                    }
+                  }
+                ) })
+              ] }),
+              c && /* @__PURE__ */ S(
+                h,
+                {
+                  id: v,
+                  alignItems: "center",
+                  gap: 2,
+                  ref: R,
+                  style: N ? { width: "276px", whiteSpace: "wrap" } : {},
+                  children: [
+                    c,
+                    n && /* @__PURE__ */ u(h, { flexShrink: 0, inlineCSS: { fontSize: "24px" }, children: n }),
+                    !s && o && /* @__PURE__ */ u(h, { flexShrink: 0, children: /* @__PURE__ */ u(
+                      C,
+                      {
+                        className: "tooltip-closer",
+                        name: "CloseLine",
+                        size: "xSmall",
+                        color: r === "primary" ? "grey.100" : "grey.white",
+                        role: "button",
+                        "aria-hidden": "false",
+                        focusable: "true",
+                        tabIndex: 0,
+                        onClick: a,
+                        onKeyDown: K,
+                        "aria-label": "닫기",
+                        inlineCSS: {
+                          marginLeft: "2px",
+                          cursor: "pointer",
+                          "&:active": { outline: "none" }
+                        }
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ot as default
+};

package/{dist/Tooltip → Tooltip}/Tooltip.stories.d.ts

@@ -32,3 +32,4 @@ type Story = StoryObj<typeof meta>;
 export declare const WithTitleBody: Story;
 export declare const WithBody: Story;
 export declare const EndAdornment: Story;
+export declare const CustomOffset: Story;

package/hooks/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;

package/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useCheckHoverPossible } from './useCheckHoverPossible/useCheckHoverPossible';
+export { default as useCheckKeyboardMode } from './useCheckKeyboardMode/useCheckKeyboardMode';
+export { default as useCheckHasFocus } from './useCheckHasFocus/useCheckHasFocus';
+export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary';

package/hooks/index.es.js

@@ -0,0 +1,10 @@
+import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.js";
+import { default as r } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import { default as f } from "./useCheckHasFocus/useCheckHasFocus.es.js";
+import { default as d } from "./useFocusBoundary/useFocusBoundary.es.js";
+export {
+  f as useCheckHasFocus,
+  s as useCheckHoverPossible,
+  r as useCheckKeyboardMode,
+  d as useFocusBoundary
+};

package/hooks/useCheckHasFocus/useCheckHasFocus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react");function i({ref:t}){const[a,u]=r.useState(!1);return r.useEffect(()=>{const o=n=>{var e;const s=n.target;(e=t.current)!=null&&e.contains(s)&&u(!0)},c=n=>{var e;const s=n.target;(e=t.current)!=null&&e.contains(s)&&u(!1)};return document.addEventListener("focusin",o),document.addEventListener("focusout",c),()=>{document.removeEventListener("focusin",o),document.removeEventListener("focusout",c)}},[t]),{hasFocus:a}}exports.default=i;

package/hooks/useCheckHasFocus/useCheckHasFocus.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+
+interface UseCheckHasFocusProps {
+    ref: RefObject<HTMLElement>;
+}
+declare function useCheckHasFocus({ ref }: UseCheckHasFocusProps): {
+    hasFocus: boolean;
+};
+export default useCheckHasFocus;

package/hooks/useCheckHasFocus/useCheckHasFocus.es.js

@@ -0,0 +1,21 @@
+import { useState as a, useEffect as i } from "react";
+function f({ ref: e }) {
+  const [r, o] = a(!1);
+  return i(() => {
+    const u = (n) => {
+      var t;
+      const s = n.target;
+      (t = e.current) != null && t.contains(s) && o(!0);
+    }, c = (n) => {
+      var t;
+      const s = n.target;
+      (t = e.current) != null && t.contains(s) && o(!1);
+    };
+    return document.addEventListener("focusin", u), document.addEventListener("focusout", c), () => {
+      document.removeEventListener("focusin", u), document.removeEventListener("focusout", c);
+    };
+  }, [e]), { hasFocus: r };
+}
+export {
+  f as default
+};

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter"," ","Home","End","PageUp","PageDown"];function u(){const[r,e]=n.useState(!1);return n.useEffect(()=>{const o=d=>{s.includes(d.key)&&e(!0)},t=()=>{e(!1)};return document.addEventListener("keydown",o),document.addEventListener("mousedown",t),()=>{document.removeEventListener("keydown",o),document.removeEventListener("mousedown",t)}},[]),{isKeyboardMode:r}}exports.default=u;

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.d.ts

@@ -0,0 +1,4 @@
+declare function useCheckKeyboardMode(): {
+    isKeyboardMode: boolean;
+};
+export default useCheckKeyboardMode;

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js

@@ -0,0 +1,30 @@
+import { useState as d, useEffect as s } from "react";
+const u = [
+  "Tab",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Enter",
+  " ",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+];
+function c() {
+  const [t, e] = d(!1);
+  return s(() => {
+    const o = (r) => {
+      u.includes(r.key) && e(!0);
+    }, n = () => {
+      e(!1);
+    };
+    return document.addEventListener("keydown", o), document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("keydown", o), document.removeEventListener("mousedown", n);
+    };
+  }, []), { isKeyboardMode: t };
+}
+export {
+  c as default
+};

package/hooks/useFocusBoundary/useFocusBoundary.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react");function g({ref:i,active:a,disabled:d=!1,returnFocus:b=!0,initialFocusId:m,delay:f=0}){const l=o.useRef(null),e=o.useRef([]),u=o.useRef(-1),s=o.useRef(),x=()=>(i.current&&(e.current=Array.from(i.current.querySelectorAll('a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe:not([tabindex="-1"]), object:not([tabindex="-1"]), embed:not([tabindex="-1"]), *[tabindex]:not([tabindex="-1"]), *[contenteditable]:not([tabindex="-1"])'))),e.current),E=t=>{var n;if(t){const r=document.getElementById(t);r&&r.focus();return}if(e.current)for(let r=0;r<e.current.length;r++){const c=e.current[r];if(!((n=c==null?void 0:c.getAttribute("class"))!=null&&n.includes("closeButton"))){c==null||c.focus(),u.current=r;break}}},v=()=>{var n;const t=e.current[u.current+1];if(!t){(n=e.current[0])==null||n.focus(),u.current=0;return}t.focus(),u.current+=1},y=()=>{var n;const t=e.current[u.current-1];if(!t){(n=e.current[e.current.length-1])==null||n.focus(),u.current=e.current.length-1;return}t.focus(),u.current-=1};o.useEffect(()=>{!a&&l.current&&b&&l.current.focus()},[a,b]),o.useEffect(()=>{if(d||!i.current)return;s.current&&clearTimeout(s.current);const t=r=>{r.key==="Tab"&&(r.preventDefault(),r.shiftKey?y():v())},n=()=>{l.current=document.activeElement,x(),E(m)};return f>0?s.current=setTimeout(n,f):n(),document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t),s.current&&clearTimeout(s.current)}},[m,i.current,d,f])}exports.default=g;

package/hooks/useFocusBoundary/useFocusBoundary.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+
+interface UseFocusBoundaryProps {
+    ref: RefObject<HTMLElement>;
+    active?: boolean;
+    disabled?: boolean;
+    returnFocus?: boolean;
+    initialFocusId?: string;
+    delay?: number;
+}
+declare function useFocusBoundary({ ref, active, disabled, returnFocus, initialFocusId, delay }: UseFocusBoundaryProps): void;
+export default useFocusBoundary;