chordia-ui 3.6.4 → 3.6.5

package/dist/TourGuideTooltip.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),s=require("react"),j=230,k=141,a="var(--Grey-Hover, #F3F7F7)",l="var(--Grey-absent, #D9D9D9)",T={top:{left:"50%",bottom:"100%",transform:"translateX(-50%)"},bottom:{left:"50%",top:"100%",transform:"translateX(-50%)"},left:{top:"50%",right:"100%",transform:"translateY(-50%)"},right:{top:"50%",left:"100%",transform:"translateY(-50%)"}};function L(e,i,o){return i==="left"?{position:"fixed",left:e.left,top:e.centerY,transform:`translate(calc(-100% - ${o}px), -50%)`}:i==="right"?{position:"fixed",left:e.right,top:e.centerY,transform:`translate(${o}px, -50%)`}:i==="top"?{position:"fixed",left:e.centerX,top:e.top,transform:`translate(-50%, calc(-100% - ${o}px))`}:{position:"fixed",left:e.centerX,top:e.bottom,transform:`translate(-50%, ${o}px)`}}const E={position:"relative",borderRadius:12,boxShadow:"0 2px 2px rgba(0, 0, 0, 0.25)",overflow:"visible",fontFamily:"Varta, var(--font-sans, sans-serif)"},I={display:"flex",flexDirection:"column",padding:"18px 20px 14px 20px"},X={margin:0,fontSize:14,lineHeight:"16px",fontWeight:600,color:"var(--text-ink, #2e3236)"},Y={margin:"12px 0 0 0",fontSize:13,lineHeight:1.45,fontWeight:400,color:"var(--text-muted, #808183)",wordBreak:"break-word"},z={marginTop:12,height:28,display:"flex",alignItems:"center",justifyContent:"space-between"},D={fontSize:12,lineHeight:"14px",fontWeight:300,color:"var(--text-ink, #2e3236)"},G={display:"flex",alignItems:"center",gap:4},C={height:28,border:"none",borderRadius:10,fontSize:13,cursor:"pointer",background:"transparent",color:"var(--text-ink, #2e3236)",fontWeight:400,padding:"0 10px"},F={height:28,border:"none",borderRadius:10,fontSize:13,cursor:"pointer",background:"#00a66e",color:"#ffffff",fontWeight:700,padding:"0 16px"},H={left:{top:"50%",right:-11,transform:"translateY(-50%)",borderTop:"10px solid transparent",borderBottom:"10px solid transparent",borderLeft:`11px solid ${l}`},right:{top:"50%",left:-11,transform:"translateY(-50%)",borderTop:"10px solid transparent",borderBottom:"10px solid transparent",borderRight:`11px solid ${l}`},top:{left:"50%",bottom:-11,transform:"translateX(-50%)",borderLeft:"10px solid transparent",borderRight:"10px solid transparent",borderTop:`11px solid ${l}`},bottom:{left:"50%",top:-11,transform:"translateX(-50%)",borderLeft:"10px solid transparent",borderRight:"10px solid transparent",borderBottom:`11px solid ${l}`}},W={left:{top:"50%",right:-10,transform:"translateY(-50%)",borderTop:"9px solid transparent",borderBottom:"9px solid transparent",borderLeft:`10px solid ${a}`},right:{top:"50%",left:-10,transform:"translateY(-50%)",borderTop:"9px solid transparent",borderBottom:"9px solid transparent",borderRight:`10px solid ${a}`},top:{left:"50%",bottom:-10,transform:"translateX(-50%)",borderLeft:"9px solid transparent",borderRight:"9px solid transparent",borderTop:`10px solid ${a}`},bottom:{left:"50%",top:-10,transform:"translateX(-50%)",borderLeft:"9px solid transparent",borderRight:"9px solid transparent",borderBottom:`10px solid ${a}`}},A=s.forwardRef(function({title:i,description:o,step:f,total:c,onNext:m,onSkip:y,position:d="left",className:v="",style:w,showArrow:S=!0,anchorId:p,gap:R=8},B){const x=s.useId(),b=s.useId(),[u,h]=s.useState(null);return s.useEffect(()=>{if(!p)return;const n=()=>{const g=document.getElementById(p);if(!g){h(null);return}const r=g.getBoundingClientRect();h({left:r.left,right:r.right,top:r.top,bottom:r.bottom,centerX:r.left+r.width/2,centerY:r.top+r.height/2})};n(),window.addEventListener("resize",n),window.addEventListener("scroll",n,!0);const $=window.setInterval(n,120);return()=>{window.removeEventListener("resize",n),window.removeEventListener("scroll",n,!0),window.clearInterval($)}},[p]),t.jsx("div",{ref:B,role:"dialog","aria-modal":"false","aria-labelledby":x,"aria-describedby":b,className:v,style:{zIndex:1100,...p&&u?L(u,d,R):{position:"absolute",...T[d]},...w},children:t.jsxs("div",{style:{...E,width:j,minHeight:k,background:a,border:`0.5px solid ${l}`},children:[S&&t.jsxs(t.Fragment,{children:[t.jsx("span",{style:{position:"absolute",width:0,height:0,...H[d]}}),t.jsx("span",{style:{position:"absolute",width:0,height:0,...W[d]}})]}),t.jsxs("div",{style:I,children:[t.jsx("h3",{id:x,style:X,children:i}),t.jsx("p",{id:b,style:Y,children:o}),t.jsxs("div",{style:z,children:[t.jsxs("span",{"aria-label":`Step ${f} of ${c}`,style:D,children:[f," of ",c]}),t.jsxs("div",{style:G,children:[t.jsx("button",{type:"button",onClick:y,"aria-label":"Skip tour",style:C,children:"Skip"}),t.jsx("button",{type:"button",onClick:m,"aria-label":`Go to next step (${f+1} of ${c})`,style:F,children:"Next"})]})]})]})]})})});exports.TourGuideTooltip=A;
+"use strict";const o=require("react/jsx-runtime"),l=require("react"),et=require("react-dom"),B=230,$=141,x="var(--Grey-Hover, #F3F7F7)",b="var(--Grey-absent, #D9D9D9)",ot={top:{left:"50%",bottom:"100%",transform:"translateX(-50%)"},bottom:{left:"50%",top:"100%",transform:"translateX(-50%)"},left:{top:"50%",right:"100%",transform:"translateY(-50%)"},right:{top:"50%",left:"100%",transform:"translateY(-50%)"}};function rt(e,n,r){return n==="left"?{position:"fixed",left:e.left,top:e.centerY,transform:`translate(calc(-100% - ${r}px), -50%)`}:n==="right"?{position:"fixed",left:e.right,top:e.centerY,transform:`translate(${r}px, -50%)`}:n==="top"?{position:"fixed",left:e.centerX,top:e.top,transform:`translate(-50%, calc(-100% - ${r}px))`}:{position:"fixed",left:e.centerX,top:e.bottom,transform:`translate(-50%, ${r}px)`}}function nt(e){return e==="left"?"right":e==="right"?"left":e==="top"?"bottom":"top"}function st(e,n,r,a){const c=window.innerWidth,v=window.innerHeight,d={left:e.left>=B+r+a,right:c-e.right>=B+r+a,top:e.top>=$+r+a,bottom:v-e.bottom>=$+r+a};if(d[n])return n;const i=nt(n);return d[i]?i:d.right?"right":d.left?"left":d.bottom?"bottom":d.top?"top":n}const it={position:"relative",borderRadius:12,boxShadow:"0 2px 2px rgba(0, 0, 0, 0.25)",overflow:"visible",fontFamily:"Varta, var(--font-sans, sans-serif)"},lt={display:"flex",flexDirection:"column",padding:"18px 20px 14px 20px"},at={margin:0,fontSize:14,lineHeight:"16px",fontWeight:600,color:"var(--text-ink, #2e3236)"},dt={margin:"12px 0 0 0",fontSize:13,lineHeight:1.45,fontWeight:400,color:"var(--text-muted, #808183)",wordBreak:"break-word"},ft={marginTop:12,height:28,display:"flex",alignItems:"center",justifyContent:"space-between"},pt={fontSize:12,lineHeight:"14px",fontWeight:300,color:"var(--text-ink, #2e3236)"},ct={display:"flex",alignItems:"center",gap:4},ut={height:28,border:"none",borderRadius:10,fontSize:13,cursor:"pointer",background:"transparent",color:"var(--text-ink, #2e3236)",fontWeight:400,padding:"0 10px"},xt={height:28,border:"none",borderRadius:10,fontSize:13,cursor:"pointer",background:"#00a66e",color:"#ffffff",fontWeight:700,padding:"0 16px"},bt={left:{top:"50%",right:-11,transform:"translateY(-50%)",borderTop:"10px solid transparent",borderBottom:"10px solid transparent",borderLeft:`11px solid ${b}`},right:{top:"50%",left:-11,transform:"translateY(-50%)",borderTop:"10px solid transparent",borderBottom:"10px solid transparent",borderRight:`11px solid ${b}`},top:{left:"50%",bottom:-11,transform:"translateX(-50%)",borderLeft:"10px solid transparent",borderRight:"10px solid transparent",borderTop:`11px solid ${b}`},bottom:{left:"50%",top:-11,transform:"translateX(-50%)",borderLeft:"10px solid transparent",borderRight:"10px solid transparent",borderBottom:`11px solid ${b}`}},mt={left:{top:"50%",right:-10,transform:"translateY(-50%)",borderTop:"9px solid transparent",borderBottom:"9px solid transparent",borderLeft:`10px solid ${x}`},right:{top:"50%",left:-10,transform:"translateY(-50%)",borderTop:"9px solid transparent",borderBottom:"9px solid transparent",borderRight:`10px solid ${x}`},top:{left:"50%",bottom:-10,transform:"translateX(-50%)",borderLeft:"9px solid transparent",borderRight:"9px solid transparent",borderTop:`10px solid ${x}`},bottom:{left:"50%",top:-10,transform:"translateX(-50%)",borderLeft:"9px solid transparent",borderRight:"9px solid transparent",borderBottom:`10px solid ${x}`}},yt=l.forwardRef(function({title:n,description:r,step:a,total:c,onNext:v,onSkip:d,position:i="left",className:D="",style:F,showArrow:H=!0,anchorId:f,gap:w=8,showBackdrop:I=!1,backdropBlur:m=0,backdropOpacity:G=.2,backdropClassName:A="",backdropStyle:N,usePortal:_=!1,portalContainer:P,zIndex:y=1100,backdropZIndex:j,highlightAnchor:k=!1,highlightPadding:T=6,autoFlip:R=!1,viewportPadding:E=12,nextLabel:q="Next",skipLabel:M="Skip"},p){const L=l.useId(),C=l.useId(),[O,W]=l.useState(null),[V,X]=l.useState(i);l.useEffect(()=>{X(i)},[i]),l.useEffect(()=>{if(!f)return;const t=()=>{const g=document.getElementById(f);if(!g){W(null);return}const s=g.getBoundingClientRect(),u={left:s.left,right:s.right,top:s.top,bottom:s.bottom,centerX:s.left+s.width/2,centerY:s.top+s.height/2};W(u),R&&X(st(u,i,w,E))};t(),window.addEventListener("resize",t),window.addEventListener("scroll",t,!0);const S=window.setInterval(t,120);return()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t,!0),window.clearInterval(S)}},[f,R,w,i,E]),l.useEffect(()=>{if(!f||!k)return;const t=document.getElementById(f);if(!t)return;const S=t.style.outline,g=t.style.outlineOffset,s=t.style.borderRadius,u=t.style.position,U=t.style.zIndex,tt=window.getComputedStyle(t).borderRadius;return t.style.outline=`${Math.max(T,0)}px solid rgba(0, 166, 110, 0.35)`,t.style.outlineOffset="0px",t.style.borderRadius=tt,u||(t.style.position="relative"),t.style.zIndex=String(y+1),()=>{t.style.outline=S,t.style.outlineOffset=g,t.style.borderRadius=s,t.style.position=u,t.style.zIndex=U}},[f,k,T,y]);const Z=l.useCallback(t=>{typeof p=="function"?p(t):p&&typeof p=="object"&&(p.current=t)},[p]),J=typeof j=="number"?j:y-1,h=R?V:i,Y=P||(typeof document<"u"?document.body:null),K=o.jsx("div",{ref:Z,role:"dialog","aria-modal":"false","aria-labelledby":L,"aria-describedby":C,className:D,style:{zIndex:y,...f&&O?rt(O,h,w):{position:"absolute",...ot[h]},...F},children:o.jsxs("div",{style:{...it,width:B,minHeight:$,background:x,border:`0.5px solid ${b}`},children:[H&&o.jsxs(o.Fragment,{children:[o.jsx("span",{style:{position:"absolute",width:0,height:0,...bt[h]}}),o.jsx("span",{style:{position:"absolute",width:0,height:0,...mt[h]}})]}),o.jsxs("div",{style:lt,children:[o.jsx("h3",{id:L,style:at,children:n}),o.jsx("p",{id:C,style:dt,children:r}),o.jsxs("div",{style:ft,children:[o.jsxs("span",{"aria-label":`Step ${a} of ${c}`,style:pt,children:[a," of ",c]}),o.jsxs("div",{style:ct,children:[o.jsx("button",{type:"button",onClick:d,"aria-label":"Skip tour",style:ut,children:M}),o.jsx("button",{type:"button",onClick:v,"aria-label":`Go to next step (${a+1} of ${c})`,style:xt,children:q})]})]})]})]})}),Q=I?o.jsx("div",{className:A,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:J,background:`rgba(0, 0, 0, ${G})`,backdropFilter:m?`blur(${m}px)`:void 0,WebkitBackdropFilter:m?`blur(${m}px)`:void 0,...N}}):null,z=o.jsxs(o.Fragment,{children:[Q,K]});return _&&Y?et.createPortal(z,Y):z});exports.TourGuideTooltip=yt;
 //# sourceMappingURL=TourGuideTooltip.cjs.js.map

package/dist/TourGuideTooltip.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourGuideTooltip.cjs.js","sources":["../src/components/common/TourGuideTooltip.jsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\n\nconst CARD_W = 230;\nconst CARD_MIN_H = 141;\nconst BASE_BG = \"var(--Grey-Hover, #F3F7F7)\";\nconst BASE_BORDER = \"var(--Grey-absent, #D9D9D9)\";\n\nconst wrapperStyleByPosition = {\n  top: { left: \"50%\", bottom: \"100%\", transform: \"translateX(-50%)\" },\n  bottom: { left: \"50%\", top: \"100%\", transform: \"translateX(-50%)\" },\n  left: { top: \"50%\", right: \"100%\", transform: \"translateY(-50%)\" },\n  right: { top: \"50%\", left: \"100%\", transform: \"translateY(-50%)\" },\n};\n\nfunction getFixedPositionStyle(rect, position, gap) {\n  if (position === \"left\") {\n    return {\n      position: \"fixed\",\n      left: rect.left,\n      top: rect.centerY,\n      transform: `translate(calc(-100% - ${gap}px), -50%)`,\n    };\n  }\n\n  if (position === \"right\") {\n    return {\n      position: \"fixed\",\n      left: rect.right,\n      top: rect.centerY,\n      transform: `translate(${gap}px, -50%)`,\n    };\n  }\n\n  if (position === \"top\") {\n    return {\n      position: \"fixed\",\n      left: rect.centerX,\n      top: rect.top,\n      transform: `translate(-50%, calc(-100% - ${gap}px))`,\n    };\n  }\n\n  return {\n    position: \"fixed\",\n    left: rect.centerX,\n    top: rect.bottom,\n    transform: `translate(-50%, ${gap}px)`,\n  };\n}\n\nconst cardStyle = {\n  position: \"relative\",\n  borderRadius: 12,\n  boxShadow: \"0 2px 2px rgba(0, 0, 0, 0.25)\",\n  overflow: \"visible\",\n  fontFamily: \"Varta, var(--font-sans, sans-serif)\",\n};\n\nconst contentStyle = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  padding: \"18px 20px 14px 20px\",\n};\n\nconst titleStyle = {\n  margin: 0,\n  fontSize: 14,\n  lineHeight: \"16px\",\n  fontWeight: 600,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst descriptionStyle = {\n  margin: \"12px 0 0 0\",\n  fontSize: 13,\n  lineHeight: 1.45,\n  fontWeight: 400,\n  color: \"var(--text-muted, #808183)\",\n  wordBreak: \"break-word\",\n};\n\nconst footerStyle = {\n  marginTop: 12,\n  height: 28,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n};\n\nconst stepStyle = {\n  fontSize: 12,\n  lineHeight: \"14px\",\n  fontWeight: 300,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst actionsStyle = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n};\n\nconst skipButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"transparent\",\n  color: \"var(--text-ink, #2e3236)\",\n  fontWeight: 400,\n  padding: \"0 10px\",\n};\n\nconst nextButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"#00a66e\",\n  color: \"#ffffff\",\n  fontWeight: 700,\n  padding: \"0 16px\",\n};\n\nconst arrowOuterByPosition = {\n  left: {\n    top: \"50%\",\n    right: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderLeft: `11px solid ${BASE_BORDER}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderRight: `11px solid ${BASE_BORDER}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderTop: `11px solid ${BASE_BORDER}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderBottom: `11px solid ${BASE_BORDER}`,\n  },\n};\n\nconst arrowInnerByPosition = {\n  left: {\n    top: \"50%\",\n    right: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderLeft: `10px solid ${BASE_BG}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderRight: `10px solid ${BASE_BG}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderTop: `10px solid ${BASE_BG}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderBottom: `10px solid ${BASE_BG}`,\n  },\n};\n\nconst TourGuideTooltip = forwardRef(function TourGuideTooltip(\n  {\n    title,\n    description,\n    step,\n    total,\n    onNext,\n    onSkip,\n    position = \"left\",\n    className = \"\",\n    style,\n    showArrow = true,\n    anchorId,\n    gap = 8,\n  },\n  ref\n) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const [anchorRect, setAnchorRect] = React.useState(null);\n\n  React.useEffect(() => {\n    if (!anchorId) return undefined;\n\n    const updateRect = () => {\n      const target = document.getElementById(anchorId);\n      if (!target) {\n        setAnchorRect(null);\n        return;\n      }\n      const rect = target.getBoundingClientRect();\n      setAnchorRect({\n        left: rect.left,\n        right: rect.right,\n        top: rect.top,\n        bottom: rect.bottom,\n        centerX: rect.left + rect.width / 2,\n        centerY: rect.top + rect.height / 2,\n      });\n    };\n\n    updateRect();\n    window.addEventListener(\"resize\", updateRect);\n    window.addEventListener(\"scroll\", updateRect, true);\n    const timer = window.setInterval(updateRect, 120);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n      window.removeEventListener(\"scroll\", updateRect, true);\n      window.clearInterval(timer);\n    };\n  }, [anchorId]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={titleId}\n      aria-describedby={descriptionId}\n      className={className}\n      style={{\n        zIndex: 1100,\n        ...(anchorId && anchorRect\n          ? getFixedPositionStyle(anchorRect, position, gap)\n          : { position: \"absolute\", ...wrapperStyleByPosition[position] }),\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          ...cardStyle,\n          width: CARD_W,\n          minHeight: CARD_MIN_H,\n          background: BASE_BG,\n          border: `0.5px solid ${BASE_BORDER}`,\n        }}\n      >\n        {showArrow && (\n          <>\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowOuterByPosition[position],\n              }}\n            />\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowInnerByPosition[position],\n              }}\n            />\n          </>\n        )}\n\n        <div style={contentStyle}>\n          <h3 id={titleId} style={titleStyle}>\n            {title}\n          </h3>\n\n          <p id={descriptionId} style={descriptionStyle}>\n            {description}\n          </p>\n\n          <div style={footerStyle}>\n            <span aria-label={`Step ${step} of ${total}`} style={stepStyle}>\n              {step} of {total}\n            </span>\n\n            <div style={actionsStyle}>\n              <button\n                type=\"button\"\n                onClick={onSkip}\n                aria-label=\"Skip tour\"\n                style={skipButtonStyle}\n              >\n                Skip\n              </button>\n\n                <button\n                  type=\"button\"\n                  onClick={onNext}\n                  aria-label={`Go to next step (${step + 1} of ${total})`}\n                  style={nextButtonStyle}\n                >\n                  Next\n                </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default TourGuideTooltip;\n\n"],"names":["CARD_W","CARD_MIN_H","BASE_BG","BASE_BORDER","wrapperStyleByPosition","getFixedPositionStyle","rect","position","gap","cardStyle","contentStyle","titleStyle","descriptionStyle","footerStyle","stepStyle","actionsStyle","skipButtonStyle","nextButtonStyle","arrowOuterByPosition","arrowInnerByPosition","TourGuideTooltip","forwardRef","title","description","step","total","onNext","onSkip","className","style","showArrow","anchorId","ref","titleId","useId","descriptionId","anchorRect","setAnchorRect","React","updateRect","target","timer","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"TourGuideTooltip.cjs.js","sources":["../src/components/common/TourGuideTooltip.jsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nconst CARD_W = 230;\nconst CARD_MIN_H = 141;\nconst BASE_BG = \"var(--Grey-Hover, #F3F7F7)\";\nconst BASE_BORDER = \"var(--Grey-absent, #D9D9D9)\";\n\nconst wrapperStyleByPosition = {\n  top: { left: \"50%\", bottom: \"100%\", transform: \"translateX(-50%)\" },\n  bottom: { left: \"50%\", top: \"100%\", transform: \"translateX(-50%)\" },\n  left: { top: \"50%\", right: \"100%\", transform: \"translateY(-50%)\" },\n  right: { top: \"50%\", left: \"100%\", transform: \"translateY(-50%)\" },\n};\n\nfunction getFixedPositionStyle(rect, position, gap) {\n  if (position === \"left\") {\n    return {\n      position: \"fixed\",\n      left: rect.left,\n      top: rect.centerY,\n      transform: `translate(calc(-100% - ${gap}px), -50%)`,\n    };\n  }\n\n  if (position === \"right\") {\n    return {\n      position: \"fixed\",\n      left: rect.right,\n      top: rect.centerY,\n      transform: `translate(${gap}px, -50%)`,\n    };\n  }\n\n  if (position === \"top\") {\n    return {\n      position: \"fixed\",\n      left: rect.centerX,\n      top: rect.top,\n      transform: `translate(-50%, calc(-100% - ${gap}px))`,\n    };\n  }\n\n  return {\n    position: \"fixed\",\n    left: rect.centerX,\n    top: rect.bottom,\n    transform: `translate(-50%, ${gap}px)`,\n  };\n}\n\nfunction getFallbackPosition(position) {\n  if (position === \"left\") return \"right\";\n  if (position === \"right\") return \"left\";\n  if (position === \"top\") return \"bottom\";\n  return \"top\";\n}\n\nfunction getBestPosition(rect, preferredPosition, gap, viewportPadding) {\n  const viewportWidth = window.innerWidth;\n  const viewportHeight = window.innerHeight;\n  const fits = {\n    left: rect.left >= CARD_W + gap + viewportPadding,\n    right: viewportWidth - rect.right >= CARD_W + gap + viewportPadding,\n    top: rect.top >= CARD_MIN_H + gap + viewportPadding,\n    bottom: viewportHeight - rect.bottom >= CARD_MIN_H + gap + viewportPadding,\n  };\n\n  if (fits[preferredPosition]) return preferredPosition;\n  const opposite = getFallbackPosition(preferredPosition);\n  if (fits[opposite]) return opposite;\n  if (fits.right) return \"right\";\n  if (fits.left) return \"left\";\n  if (fits.bottom) return \"bottom\";\n  if (fits.top) return \"top\";\n  return preferredPosition;\n}\n\nconst cardStyle = {\n  position: \"relative\",\n  borderRadius: 12,\n  boxShadow: \"0 2px 2px rgba(0, 0, 0, 0.25)\",\n  overflow: \"visible\",\n  fontFamily: \"Varta, var(--font-sans, sans-serif)\",\n};\n\nconst contentStyle = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  padding: \"18px 20px 14px 20px\",\n};\n\nconst titleStyle = {\n  margin: 0,\n  fontSize: 14,\n  lineHeight: \"16px\",\n  fontWeight: 600,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst descriptionStyle = {\n  margin: \"12px 0 0 0\",\n  fontSize: 13,\n  lineHeight: 1.45,\n  fontWeight: 400,\n  color: \"var(--text-muted, #808183)\",\n  wordBreak: \"break-word\",\n};\n\nconst footerStyle = {\n  marginTop: 12,\n  height: 28,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n};\n\nconst stepStyle = {\n  fontSize: 12,\n  lineHeight: \"14px\",\n  fontWeight: 300,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst actionsStyle = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n};\n\nconst skipButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"transparent\",\n  color: \"var(--text-ink, #2e3236)\",\n  fontWeight: 400,\n  padding: \"0 10px\",\n};\n\nconst nextButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"#00a66e\",\n  color: \"#ffffff\",\n  fontWeight: 700,\n  padding: \"0 16px\",\n};\n\nconst arrowOuterByPosition = {\n  left: {\n    top: \"50%\",\n    right: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderLeft: `11px solid ${BASE_BORDER}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderRight: `11px solid ${BASE_BORDER}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderTop: `11px solid ${BASE_BORDER}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderBottom: `11px solid ${BASE_BORDER}`,\n  },\n};\n\nconst arrowInnerByPosition = {\n  left: {\n    top: \"50%\",\n    right: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderLeft: `10px solid ${BASE_BG}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderRight: `10px solid ${BASE_BG}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderTop: `10px solid ${BASE_BG}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderBottom: `10px solid ${BASE_BG}`,\n  },\n};\n\nconst TourGuideTooltip = forwardRef(function TourGuideTooltip(\n  {\n    title,\n    description,\n    step,\n    total,\n    onNext,\n    onSkip,\n    position = \"left\",\n    className = \"\",\n    style,\n    showArrow = true,\n    anchorId,\n    gap = 8,\n    showBackdrop = false,\n    backdropBlur = 0,\n    backdropOpacity = 0.2,\n    backdropClassName = \"\",\n    backdropStyle,\n    usePortal = false,\n    portalContainer,\n    zIndex = 1100,\n    backdropZIndex,\n    highlightAnchor = false,\n    highlightPadding = 6,\n    autoFlip = false,\n    viewportPadding = 12,\n    nextLabel = \"Next\",\n    skipLabel = \"Skip\",\n  },\n  ref\n) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const [anchorRect, setAnchorRect] = React.useState(null);\n  const [activePosition, setActivePosition] = React.useState(position);\n\n  React.useEffect(() => {\n    setActivePosition(position);\n  }, [position]);\n\n  React.useEffect(() => {\n    if (!anchorId) return undefined;\n\n    const updateRect = () => {\n      const target = document.getElementById(anchorId);\n      if (!target) {\n        setAnchorRect(null);\n        return;\n      }\n      const rect = target.getBoundingClientRect();\n      const nextRect = {\n        left: rect.left,\n        right: rect.right,\n        top: rect.top,\n        bottom: rect.bottom,\n        centerX: rect.left + rect.width / 2,\n        centerY: rect.top + rect.height / 2,\n      };\n      setAnchorRect(nextRect);\n      if (autoFlip) {\n        setActivePosition(\n          getBestPosition(nextRect, position, gap, viewportPadding)\n        );\n      }\n    };\n\n    updateRect();\n    window.addEventListener(\"resize\", updateRect);\n    window.addEventListener(\"scroll\", updateRect, true);\n    const timer = window.setInterval(updateRect, 120);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n      window.removeEventListener(\"scroll\", updateRect, true);\n      window.clearInterval(timer);\n    };\n  }, [anchorId, autoFlip, gap, position, viewportPadding]);\n\n  React.useEffect(() => {\n    if (!anchorId || !highlightAnchor) return undefined;\n\n    const target = document.getElementById(anchorId);\n    if (!target) return undefined;\n\n    const previousOutline = target.style.outline;\n    const previousOutlineOffset = target.style.outlineOffset;\n    const previousBorderRadius = target.style.borderRadius;\n    const previousPosition = target.style.position;\n    const previousZIndex = target.style.zIndex;\n    const computedBorderRadius = window.getComputedStyle(target).borderRadius;\n\n    target.style.outline = `${Math.max(highlightPadding, 0)}px solid rgba(0, 166, 110, 0.35)`;\n    target.style.outlineOffset = \"0px\";\n    target.style.borderRadius = computedBorderRadius;\n    if (!previousPosition) target.style.position = \"relative\";\n    target.style.zIndex = String(zIndex + 1);\n\n    return () => {\n      target.style.outline = previousOutline;\n      target.style.outlineOffset = previousOutlineOffset;\n      target.style.borderRadius = previousBorderRadius;\n      target.style.position = previousPosition;\n      target.style.zIndex = previousZIndex;\n    };\n  }, [anchorId, highlightAnchor, highlightPadding, zIndex]);\n\n  const setRefs = React.useCallback(\n    (node) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref && typeof ref === \"object\") {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  const resolvedBackdropZIndex =\n    typeof backdropZIndex === \"number\" ? backdropZIndex : zIndex - 1;\n  const resolvedPosition = autoFlip ? activePosition : position;\n  const resolvedPortalContainer =\n    portalContainer ||\n    (typeof document !== \"undefined\" ? document.body : null);\n\n  const tooltipNode = (\n    <div\n      ref={setRefs}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={titleId}\n      aria-describedby={descriptionId}\n      className={className}\n      style={{\n        zIndex,\n        ...(anchorId && anchorRect\n          ? getFixedPositionStyle(anchorRect, resolvedPosition, gap)\n          : { position: \"absolute\", ...wrapperStyleByPosition[resolvedPosition] }),\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          ...cardStyle,\n          width: CARD_W,\n          minHeight: CARD_MIN_H,\n          background: BASE_BG,\n          border: `0.5px solid ${BASE_BORDER}`,\n        }}\n      >\n        {showArrow && (\n          <>\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowOuterByPosition[resolvedPosition],\n              }}\n            />\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowInnerByPosition[resolvedPosition],\n              }}\n            />\n          </>\n        )}\n\n        <div style={contentStyle}>\n          <h3 id={titleId} style={titleStyle}>\n            {title}\n          </h3>\n\n          <p id={descriptionId} style={descriptionStyle}>\n            {description}\n          </p>\n\n          <div style={footerStyle}>\n            <span aria-label={`Step ${step} of ${total}`} style={stepStyle}>\n              {step} of {total}\n            </span>\n\n            <div style={actionsStyle}>\n              <button\n                type=\"button\"\n                onClick={onSkip}\n                aria-label=\"Skip tour\"\n                style={skipButtonStyle}\n              >\n                {skipLabel}\n              </button>\n\n              <button\n                type=\"button\"\n                onClick={onNext}\n                aria-label={`Go to next step (${step + 1} of ${total})`}\n                style={nextButtonStyle}\n              >\n                {nextLabel}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  const backdropNode = showBackdrop ? (\n    <div\n      className={backdropClassName}\n      aria-hidden=\"true\"\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        zIndex: resolvedBackdropZIndex,\n        background: `rgba(0, 0, 0, ${backdropOpacity})`,\n        backdropFilter: backdropBlur ? `blur(${backdropBlur}px)` : undefined,\n        WebkitBackdropFilter: backdropBlur\n          ? `blur(${backdropBlur}px)`\n          : undefined,\n        ...backdropStyle,\n      }}\n    />\n  ) : null;\n\n  const content = (\n    <>\n      {backdropNode}\n      {tooltipNode}\n    </>\n  );\n\n  if (usePortal && resolvedPortalContainer) {\n    return createPortal(content, resolvedPortalContainer);\n  }\n\n  return content;\n});\n\nexport default TourGuideTooltip;\n\n"],"names":["CARD_W","CARD_MIN_H","BASE_BG","BASE_BORDER","wrapperStyleByPosition","getFixedPositionStyle","rect","position","gap","getFallbackPosition","getBestPosition","preferredPosition","viewportPadding","viewportWidth","viewportHeight","fits","opposite","cardStyle","contentStyle","titleStyle","descriptionStyle","footerStyle","stepStyle","actionsStyle","skipButtonStyle","nextButtonStyle","arrowOuterByPosition","arrowInnerByPosition","TourGuideTooltip","forwardRef","title","description","step","total","onNext","onSkip","className","style","showArrow","anchorId","showBackdrop","backdropBlur","backdropOpacity","backdropClassName","backdropStyle","usePortal","portalContainer","zIndex","backdropZIndex","highlightAnchor","highlightPadding","autoFlip","nextLabel","skipLabel","ref","titleId","useId","descriptionId","anchorRect","setAnchorRect","React","activePosition","setActivePosition","updateRect","target","nextRect","timer","previousOutline","previousOutlineOffset","previousBorderRadius","previousPosition","previousZIndex","computedBorderRadius","setRefs","node","resolvedBackdropZIndex","resolvedPosition","resolvedPortalContainer","tooltipNode","jsx","jsxs","Fragment","backdropNode","content","createPortal"],"mappings":"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"}

package/dist/TourGuideTooltip.es.js

@@ -1,73 +1,89 @@
-import { jsx as r, jsxs as i, Fragment as L } from "react/jsx-runtime";
-import u, { forwardRef as E, useId as y } from "react";
-const X = 230, Y = 141, a = "var(--Grey-Hover, #F3F7F7)", l = "var(--Grey-absent, #D9D9D9)", z = {
+import { jsx as a, jsxs as f, Fragment as F } from "react/jsx-runtime";
+import c, { forwardRef as nt, useId as I } from "react";
+import { createPortal as it } from "react-dom";
+const $ = 230, k = 141, x = "var(--Grey-Hover, #F3F7F7)", m = "var(--Grey-absent, #D9D9D9)", st = {
   top: { left: "50%", bottom: "100%", transform: "translateX(-50%)" },
   bottom: { left: "50%", top: "100%", transform: "translateX(-50%)" },
   left: { top: "50%", right: "100%", transform: "translateY(-50%)" },
   right: { top: "50%", left: "100%", transform: "translateY(-50%)" }
 };
-function I(t, s, o) {
-  return s === "left" ? {
+function lt(e, r, o) {
+  return r === "left" ? {
     position: "fixed",
-    left: t.left,
-    top: t.centerY,
+    left: e.left,
+    top: e.centerY,
     transform: `translate(calc(-100% - ${o}px), -50%)`
-  } : s === "right" ? {
+  } : r === "right" ? {
     position: "fixed",
-    left: t.right,
-    top: t.centerY,
+    left: e.right,
+    top: e.centerY,
     transform: `translate(${o}px, -50%)`
-  } : s === "top" ? {
+  } : r === "top" ? {
     position: "fixed",
-    left: t.centerX,
-    top: t.top,
+    left: e.centerX,
+    top: e.top,
     transform: `translate(-50%, calc(-100% - ${o}px))`
   } : {
     position: "fixed",
-    left: t.centerX,
-    top: t.bottom,
+    left: e.centerX,
+    top: e.bottom,
     transform: `translate(-50%, ${o}px)`
   };
 }
-const D = {
+function at(e) {
+  return e === "left" ? "right" : e === "right" ? "left" : e === "top" ? "bottom" : "top";
+}
+function dt(e, r, o, s) {
+  const u = window.innerWidth, w = window.innerHeight, l = {
+    left: e.left >= $ + o + s,
+    right: u - e.right >= $ + o + s,
+    top: e.top >= k + o + s,
+    bottom: w - e.bottom >= k + o + s
+  };
+  if (l[r])
+    return r;
+  const i = at(r);
+  return l[i] ? i : l.right ? "right" : l.left ? "left" : l.bottom ? "bottom" : l.top ? "top" : r;
+}
+const ft = {
   position: "relative",
   borderRadius: 12,
   boxShadow: "0 2px 2px rgba(0, 0, 0, 0.25)",
   overflow: "visible",
   fontFamily: "Varta, var(--font-sans, sans-serif)"
-}, _ = {
+}, pt = {
   display: "flex",
   flexDirection: "column",
   padding: "18px 20px 14px 20px"
-}, C = {
+}, ct = {
   margin: 0,
   fontSize: 14,
   lineHeight: "16px",
   fontWeight: 600,
   color: "var(--text-ink, #2e3236)"
-}, F = {
+}, ut = {
   margin: "12px 0 0 0",
   fontSize: 13,
   lineHeight: 1.45,
   fontWeight: 400,
   color: "var(--text-muted, #808183)",
   wordBreak: "break-word"
-}, G = {
+}, bt = {
   marginTop: 12,
   height: 28,
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between"
-}, H = {
+}, xt = {
   fontSize: 12,
   lineHeight: "14px",
   fontWeight: 300,
   color: "var(--text-ink, #2e3236)"
-}, W = {
+}, mt = {
   display: "flex",
   alignItems: "center",
   gap: 4
-}, A = {
+}, yt = {
   height: 28,
   border: "none",
   borderRadius: 10,
@@ -77,7 +93,7 @@ const D = {
   color: "var(--text-ink, #2e3236)",
   fontWeight: 400,
   padding: "0 10px"
-}, P = {
+}, ht = {
   height: 28,
   border: "none",
   borderRadius: 10,
@@ -87,14 +103,14 @@ const D = {
   color: "#ffffff",
   fontWeight: 700,
   padding: "0 16px"
-}, j = {
+}, gt = {
   left: {
     top: "50%",
     right: -11,
     transform: "translateY(-50%)",
     borderTop: "10px solid transparent",
     borderBottom: "10px solid transparent",
-    borderLeft: `11px solid ${l}`
+    borderLeft: `11px solid ${m}`
   },
   right: {
     top: "50%",
@@ -102,7 +118,7 @@ const D = {
     transform: "translateY(-50%)",
     borderTop: "10px solid transparent",
     borderBottom: "10px solid transparent",
-    borderRight: `11px solid ${l}`
+    borderRight: `11px solid ${m}`
   },
   top: {
     left: "50%",
@@ -110,7 +126,7 @@ const D = {
     transform: "translateX(-50%)",
     borderLeft: "10px solid transparent",
     borderRight: "10px solid transparent",
-    borderTop: `11px solid ${l}`
+    borderTop: `11px solid ${m}`
   },
   bottom: {
     left: "50%",
@@ -118,16 +134,16 @@ const D = {
     transform: "translateX(-50%)",
     borderLeft: "10px solid transparent",
     borderRight: "10px solid transparent",
-    borderBottom: `11px solid ${l}`
+    borderBottom: `11px solid ${m}`
   }
-}, N = {
+}, vt = {
   left: {
     top: "50%",
     right: -10,
     transform: "translateY(-50%)",
     borderTop: "9px solid transparent",
     borderBottom: "9px solid transparent",
-    borderLeft: `10px solid ${a}`
+    borderLeft: `10px solid ${x}`
   },
   right: {
     top: "50%",
@@ -135,7 +151,7 @@ const D = {
     transform: "translateY(-50%)",
     borderTop: "9px solid transparent",
     borderBottom: "9px solid transparent",
-    borderRight: `10px solid ${a}`
+    borderRight: `10px solid ${x}`
   },
   top: {
     left: "50%",
@@ -143,7 +159,7 @@ const D = {
     transform: "translateX(-50%)",
     borderLeft: "9px solid transparent",
     borderRight: "9px solid transparent",
-    borderTop: `10px solid ${a}`
+    borderTop: `10px solid ${x}`
   },
   bottom: {
     left: "50%",
@@ -151,124 +167,159 @@ const D = {
     transform: "translateX(-50%)",
     borderLeft: "9px solid transparent",
     borderRight: "9px solid transparent",
-    borderBottom: `10px solid ${a}`
+    borderBottom: `10px solid ${x}`
   }
-}, V = E(function({
-  title: s,
+}, Bt = nt(function({
+  title: r,
   description: o,
-  step: f,
-  total: c,
-  onNext: v,
-  onSkip: w,
-  position: d = "left",
-  className: S = "",
-  style: R,
-  showArrow: B = !0,
-  anchorId: p,
-  gap: $ = 8
-}, k) {
-  const b = y(), x = y(), [h, m] = u.useState(null);
-  return u.useEffect(() => {
-    if (!p)
+  step: s,
+  total: u,
+  onNext: w,
+  onSkip: l,
+  position: i = "left",
+  className: _ = "",
+  style: G,
+  showArrow: A = !0,
+  anchorId: d,
+  gap: R = 8,
+  showBackdrop: N = !1,
+  backdropBlur: y = 0,
+  backdropOpacity: j = 0.2,
+  backdropClassName: P = "",
+  backdropStyle: M,
+  usePortal: V = !1,
+  portalContainer: Z,
+  zIndex: h = 1100,
+  backdropZIndex: E,
+  highlightAnchor: T = !1,
+  highlightPadding: L = 6,
+  autoFlip: S = !1,
+  viewportPadding: C = 12,
+  nextLabel: q = "Next",
+  skipLabel: J = "Skip"
+}, p) {
+  const W = I(), X = I(), [Y, z] = c.useState(null), [K, H] = c.useState(i);
+  c.useEffect(() => {
+    H(i);
+  }, [i]), c.useEffect(() => {
+    if (!d)
       return;
-    const n = () => {
-      const g = document.getElementById(p);
-      if (!g) {
-        m(null);
+    const t = () => {
+      const v = document.getElementById(d);
+      if (!v) {
+        z(null);
         return;
       }
-      const e = g.getBoundingClientRect();
-      m({
-        left: e.left,
-        right: e.right,
-        top: e.top,
-        bottom: e.bottom,
-        centerX: e.left + e.width / 2,
-        centerY: e.top + e.height / 2
-      });
+      const n = v.getBoundingClientRect(), b = {
+        left: n.left,
+        right: n.right,
+        top: n.top,
+        bottom: n.bottom,
+        centerX: n.left + n.width / 2,
+        centerY: n.top + n.height / 2
+      };
+      z(b), S && H(
+        dt(b, i, R, C)
+      );
     };
-    n(), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0);
-    const T = window.setInterval(n, 120);
+    t(), window.addEventListener("resize", t), window.addEventListener("scroll", t, !0);
+    const B = window.setInterval(t, 120);
     return () => {
-      window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0), window.clearInterval(T);
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0), window.clearInterval(B);
     };
-  }, [p]), /* @__PURE__ */ r(
+  }, [d, S, R, i, C]), c.useEffect(() => {
+    if (!d || !T)
+      return;
+    const t = document.getElementById(d);
+    if (!t)
+      return;
+    const B = t.style.outline, v = t.style.outlineOffset, n = t.style.borderRadius, b = t.style.position, ot = t.style.zIndex, rt = window.getComputedStyle(t).borderRadius;
+    return t.style.outline = `${Math.max(L, 0)}px solid rgba(0, 166, 110, 0.35)`, t.style.outlineOffset = "0px", t.style.borderRadius = rt, b || (t.style.position = "relative"), t.style.zIndex = String(h + 1), () => {
+      t.style.outline = B, t.style.outlineOffset = v, t.style.borderRadius = n, t.style.position = b, t.style.zIndex = ot;
+    };
+  }, [d, T, L, h]);
+  const Q = c.useCallback(
+    (t) => {
+      typeof p == "function" ? p(t) : p && typeof p == "object" && (p.current = t);
+    },
+    [p]
+  ), U = typeof E == "number" ? E : h - 1, g = S ? K : i, O = Z || (typeof document < "u" ? document.body : null), tt = /* @__PURE__ */ a(
     "div",
     {
-      ref: k,
+      ref: Q,
       role: "dialog",
       "aria-modal": "false",
-      "aria-labelledby": b,
-      "aria-describedby": x,
-      className: S,
+      "aria-labelledby": W,
+      "aria-describedby": X,
+      className: _,
       style: {
-        zIndex: 1100,
-        ...p && h ? I(h, d, $) : { position: "absolute", ...z[d] },
-        ...R
+        zIndex: h,
+        ...d && Y ? lt(Y, g, R) : { position: "absolute", ...st[g] },
+        ...G
       },
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ f(
         "div",
         {
           style: {
-            ...D,
-            width: X,
-            minHeight: Y,
-            background: a,
-            border: `0.5px solid ${l}`
+            ...ft,
+            width: $,
+            minHeight: k,
+            background: x,
+            border: `0.5px solid ${m}`
           },
           children: [
-            B && /* @__PURE__ */ i(L, { children: [
-              /* @__PURE__ */ r(
+            A && /* @__PURE__ */ f(F, { children: [
+              /* @__PURE__ */ a(
                 "span",
                 {
                   style: {
                     position: "absolute",
                     width: 0,
                     height: 0,
-                    ...j[d]
+                    ...gt[g]
                   }
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ a(
                 "span",
                 {
                   style: {
                     position: "absolute",
                     width: 0,
                     height: 0,
-                    ...N[d]
+                    ...vt[g]
                   }
                 }
               )
             ] }),
-            /* @__PURE__ */ i("div", { style: _, children: [
-              /* @__PURE__ */ r("h3", { id: b, style: C, children: s }),
-              /* @__PURE__ */ r("p", { id: x, style: F, children: o }),
-              /* @__PURE__ */ i("div", { style: G, children: [
-                /* @__PURE__ */ i("span", { "aria-label": `Step ${f} of ${c}`, style: H, children: [
-                  f,
+            /* @__PURE__ */ f("div", { style: pt, children: [
+              /* @__PURE__ */ a("h3", { id: W, style: ct, children: r }),
+              /* @__PURE__ */ a("p", { id: X, style: ut, children: o }),
+              /* @__PURE__ */ f("div", { style: bt, children: [
+                /* @__PURE__ */ f("span", { "aria-label": `Step ${s} of ${u}`, style: xt, children: [
+                  s,
                   " of ",
-                  c
+                  u
                 ] }),
-                /* @__PURE__ */ i("div", { style: W, children: [
-                  /* @__PURE__ */ r(
+                /* @__PURE__ */ f("div", { style: mt, children: [
+                  /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: w,
+                      onClick: l,
                       "aria-label": "Skip tour",
-                      style: A,
-                      children: "Skip"
+                      style: yt,
+                      children: J
                     }
                   ),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
-                      onClick: v,
-                      "aria-label": `Go to next step (${f + 1} of ${c})`,
-                      style: P,
-                      children: "Next"
+                      onClick: w,
+                      "aria-label": `Go to next step (${s + 1} of ${u})`,
+                      style: ht,
+                      children: q
                     }
                   )
                 ] })
@@ -278,9 +329,28 @@ const D = {
         }
       )
     }
-  );
+  ), et = N ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: P,
+      "aria-hidden": "true",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: U,
+        background: `rgba(0, 0, 0, ${j})`,
+        backdropFilter: y ? `blur(${y}px)` : void 0,
+        WebkitBackdropFilter: y ? `blur(${y}px)` : void 0,
+        ...M
+      }
+    }
+  ) : null, D = /* @__PURE__ */ f(F, { children: [
+    et,
+    tt
+  ] });
+  return V && O ? it(D, O) : D;
 });
 export {
-  V as T
+  Bt as T
 };
 //# sourceMappingURL=TourGuideTooltip.es.js.map

package/dist/TourGuideTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TourGuideTooltip.es.js","sources":["../src/components/common/TourGuideTooltip.jsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\n\nconst CARD_W = 230;\nconst CARD_MIN_H = 141;\nconst BASE_BG = \"var(--Grey-Hover, #F3F7F7)\";\nconst BASE_BORDER = \"var(--Grey-absent, #D9D9D9)\";\n\nconst wrapperStyleByPosition = {\n  top: { left: \"50%\", bottom: \"100%\", transform: \"translateX(-50%)\" },\n  bottom: { left: \"50%\", top: \"100%\", transform: \"translateX(-50%)\" },\n  left: { top: \"50%\", right: \"100%\", transform: \"translateY(-50%)\" },\n  right: { top: \"50%\", left: \"100%\", transform: \"translateY(-50%)\" },\n};\n\nfunction getFixedPositionStyle(rect, position, gap) {\n  if (position === \"left\") {\n    return {\n      position: \"fixed\",\n      left: rect.left,\n      top: rect.centerY,\n      transform: `translate(calc(-100% - ${gap}px), -50%)`,\n    };\n  }\n\n  if (position === \"right\") {\n    return {\n      position: \"fixed\",\n      left: rect.right,\n      top: rect.centerY,\n      transform: `translate(${gap}px, -50%)`,\n    };\n  }\n\n  if (position === \"top\") {\n    return {\n      position: \"fixed\",\n      left: rect.centerX,\n      top: rect.top,\n      transform: `translate(-50%, calc(-100% - ${gap}px))`,\n    };\n  }\n\n  return {\n    position: \"fixed\",\n    left: rect.centerX,\n    top: rect.bottom,\n    transform: `translate(-50%, ${gap}px)`,\n  };\n}\n\nconst cardStyle = {\n  position: \"relative\",\n  borderRadius: 12,\n  boxShadow: \"0 2px 2px rgba(0, 0, 0, 0.25)\",\n  overflow: \"visible\",\n  fontFamily: \"Varta, var(--font-sans, sans-serif)\",\n};\n\nconst contentStyle = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  padding: \"18px 20px 14px 20px\",\n};\n\nconst titleStyle = {\n  margin: 0,\n  fontSize: 14,\n  lineHeight: \"16px\",\n  fontWeight: 600,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst descriptionStyle = {\n  margin: \"12px 0 0 0\",\n  fontSize: 13,\n  lineHeight: 1.45,\n  fontWeight: 400,\n  color: \"var(--text-muted, #808183)\",\n  wordBreak: \"break-word\",\n};\n\nconst footerStyle = {\n  marginTop: 12,\n  height: 28,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n};\n\nconst stepStyle = {\n  fontSize: 12,\n  lineHeight: \"14px\",\n  fontWeight: 300,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst actionsStyle = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n};\n\nconst skipButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"transparent\",\n  color: \"var(--text-ink, #2e3236)\",\n  fontWeight: 400,\n  padding: \"0 10px\",\n};\n\nconst nextButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"#00a66e\",\n  color: \"#ffffff\",\n  fontWeight: 700,\n  padding: \"0 16px\",\n};\n\nconst arrowOuterByPosition = {\n  left: {\n    top: \"50%\",\n    right: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderLeft: `11px solid ${BASE_BORDER}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderRight: `11px solid ${BASE_BORDER}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderTop: `11px solid ${BASE_BORDER}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderBottom: `11px solid ${BASE_BORDER}`,\n  },\n};\n\nconst arrowInnerByPosition = {\n  left: {\n    top: \"50%\",\n    right: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderLeft: `10px solid ${BASE_BG}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderRight: `10px solid ${BASE_BG}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderTop: `10px solid ${BASE_BG}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderBottom: `10px solid ${BASE_BG}`,\n  },\n};\n\nconst TourGuideTooltip = forwardRef(function TourGuideTooltip(\n  {\n    title,\n    description,\n    step,\n    total,\n    onNext,\n    onSkip,\n    position = \"left\",\n    className = \"\",\n    style,\n    showArrow = true,\n    anchorId,\n    gap = 8,\n  },\n  ref\n) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const [anchorRect, setAnchorRect] = React.useState(null);\n\n  React.useEffect(() => {\n    if (!anchorId) return undefined;\n\n    const updateRect = () => {\n      const target = document.getElementById(anchorId);\n      if (!target) {\n        setAnchorRect(null);\n        return;\n      }\n      const rect = target.getBoundingClientRect();\n      setAnchorRect({\n        left: rect.left,\n        right: rect.right,\n        top: rect.top,\n        bottom: rect.bottom,\n        centerX: rect.left + rect.width / 2,\n        centerY: rect.top + rect.height / 2,\n      });\n    };\n\n    updateRect();\n    window.addEventListener(\"resize\", updateRect);\n    window.addEventListener(\"scroll\", updateRect, true);\n    const timer = window.setInterval(updateRect, 120);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n      window.removeEventListener(\"scroll\", updateRect, true);\n      window.clearInterval(timer);\n    };\n  }, [anchorId]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={titleId}\n      aria-describedby={descriptionId}\n      className={className}\n      style={{\n        zIndex: 1100,\n        ...(anchorId && anchorRect\n          ? getFixedPositionStyle(anchorRect, position, gap)\n          : { position: \"absolute\", ...wrapperStyleByPosition[position] }),\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          ...cardStyle,\n          width: CARD_W,\n          minHeight: CARD_MIN_H,\n          background: BASE_BG,\n          border: `0.5px solid ${BASE_BORDER}`,\n        }}\n      >\n        {showArrow && (\n          <>\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowOuterByPosition[position],\n              }}\n            />\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowInnerByPosition[position],\n              }}\n            />\n          </>\n        )}\n\n        <div style={contentStyle}>\n          <h3 id={titleId} style={titleStyle}>\n            {title}\n          </h3>\n\n          <p id={descriptionId} style={descriptionStyle}>\n            {description}\n          </p>\n\n          <div style={footerStyle}>\n            <span aria-label={`Step ${step} of ${total}`} style={stepStyle}>\n              {step} of {total}\n            </span>\n\n            <div style={actionsStyle}>\n              <button\n                type=\"button\"\n                onClick={onSkip}\n                aria-label=\"Skip tour\"\n                style={skipButtonStyle}\n              >\n                Skip\n              </button>\n\n                <button\n                  type=\"button\"\n                  onClick={onNext}\n                  aria-label={`Go to next step (${step + 1} of ${total})`}\n                  style={nextButtonStyle}\n                >\n                  Next\n                </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default TourGuideTooltip;\n\n"],"names":["CARD_W","CARD_MIN_H","BASE_BG","BASE_BORDER","wrapperStyleByPosition","getFixedPositionStyle","rect","position","gap","cardStyle","contentStyle","titleStyle","descriptionStyle","footerStyle","stepStyle","actionsStyle","skipButtonStyle","nextButtonStyle","arrowOuterByPosition","arrowInnerByPosition","TourGuideTooltip","forwardRef","title","description","step","total","onNext","onSkip","className","style","showArrow","anchorId","ref","titleId","useId","descriptionId","anchorRect","setAnchorRect","React","updateRect","target","timer","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"TourGuideTooltip.es.js","sources":["../src/components/common/TourGuideTooltip.jsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nconst CARD_W = 230;\nconst CARD_MIN_H = 141;\nconst BASE_BG = \"var(--Grey-Hover, #F3F7F7)\";\nconst BASE_BORDER = \"var(--Grey-absent, #D9D9D9)\";\n\nconst wrapperStyleByPosition = {\n  top: { left: \"50%\", bottom: \"100%\", transform: \"translateX(-50%)\" },\n  bottom: { left: \"50%\", top: \"100%\", transform: \"translateX(-50%)\" },\n  left: { top: \"50%\", right: \"100%\", transform: \"translateY(-50%)\" },\n  right: { top: \"50%\", left: \"100%\", transform: \"translateY(-50%)\" },\n};\n\nfunction getFixedPositionStyle(rect, position, gap) {\n  if (position === \"left\") {\n    return {\n      position: \"fixed\",\n      left: rect.left,\n      top: rect.centerY,\n      transform: `translate(calc(-100% - ${gap}px), -50%)`,\n    };\n  }\n\n  if (position === \"right\") {\n    return {\n      position: \"fixed\",\n      left: rect.right,\n      top: rect.centerY,\n      transform: `translate(${gap}px, -50%)`,\n    };\n  }\n\n  if (position === \"top\") {\n    return {\n      position: \"fixed\",\n      left: rect.centerX,\n      top: rect.top,\n      transform: `translate(-50%, calc(-100% - ${gap}px))`,\n    };\n  }\n\n  return {\n    position: \"fixed\",\n    left: rect.centerX,\n    top: rect.bottom,\n    transform: `translate(-50%, ${gap}px)`,\n  };\n}\n\nfunction getFallbackPosition(position) {\n  if (position === \"left\") return \"right\";\n  if (position === \"right\") return \"left\";\n  if (position === \"top\") return \"bottom\";\n  return \"top\";\n}\n\nfunction getBestPosition(rect, preferredPosition, gap, viewportPadding) {\n  const viewportWidth = window.innerWidth;\n  const viewportHeight = window.innerHeight;\n  const fits = {\n    left: rect.left >= CARD_W + gap + viewportPadding,\n    right: viewportWidth - rect.right >= CARD_W + gap + viewportPadding,\n    top: rect.top >= CARD_MIN_H + gap + viewportPadding,\n    bottom: viewportHeight - rect.bottom >= CARD_MIN_H + gap + viewportPadding,\n  };\n\n  if (fits[preferredPosition]) return preferredPosition;\n  const opposite = getFallbackPosition(preferredPosition);\n  if (fits[opposite]) return opposite;\n  if (fits.right) return \"right\";\n  if (fits.left) return \"left\";\n  if (fits.bottom) return \"bottom\";\n  if (fits.top) return \"top\";\n  return preferredPosition;\n}\n\nconst cardStyle = {\n  position: \"relative\",\n  borderRadius: 12,\n  boxShadow: \"0 2px 2px rgba(0, 0, 0, 0.25)\",\n  overflow: \"visible\",\n  fontFamily: \"Varta, var(--font-sans, sans-serif)\",\n};\n\nconst contentStyle = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  padding: \"18px 20px 14px 20px\",\n};\n\nconst titleStyle = {\n  margin: 0,\n  fontSize: 14,\n  lineHeight: \"16px\",\n  fontWeight: 600,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst descriptionStyle = {\n  margin: \"12px 0 0 0\",\n  fontSize: 13,\n  lineHeight: 1.45,\n  fontWeight: 400,\n  color: \"var(--text-muted, #808183)\",\n  wordBreak: \"break-word\",\n};\n\nconst footerStyle = {\n  marginTop: 12,\n  height: 28,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n};\n\nconst stepStyle = {\n  fontSize: 12,\n  lineHeight: \"14px\",\n  fontWeight: 300,\n  color: \"var(--text-ink, #2e3236)\",\n};\n\nconst actionsStyle = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n};\n\nconst skipButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"transparent\",\n  color: \"var(--text-ink, #2e3236)\",\n  fontWeight: 400,\n  padding: \"0 10px\",\n};\n\nconst nextButtonStyle = {\n  height: 28,\n  border: \"none\",\n  borderRadius: 10,\n  fontSize: 13,\n  cursor: \"pointer\",\n  background: \"#00a66e\",\n  color: \"#ffffff\",\n  fontWeight: 700,\n  padding: \"0 16px\",\n};\n\nconst arrowOuterByPosition = {\n  left: {\n    top: \"50%\",\n    right: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderLeft: `11px solid ${BASE_BORDER}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -11,\n    transform: \"translateY(-50%)\",\n    borderTop: \"10px solid transparent\",\n    borderBottom: \"10px solid transparent\",\n    borderRight: `11px solid ${BASE_BORDER}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderTop: `11px solid ${BASE_BORDER}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -11,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"10px solid transparent\",\n    borderRight: \"10px solid transparent\",\n    borderBottom: `11px solid ${BASE_BORDER}`,\n  },\n};\n\nconst arrowInnerByPosition = {\n  left: {\n    top: \"50%\",\n    right: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderLeft: `10px solid ${BASE_BG}`,\n  },\n  right: {\n    top: \"50%\",\n    left: -10,\n    transform: \"translateY(-50%)\",\n    borderTop: \"9px solid transparent\",\n    borderBottom: \"9px solid transparent\",\n    borderRight: `10px solid ${BASE_BG}`,\n  },\n  top: {\n    left: \"50%\",\n    bottom: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderTop: `10px solid ${BASE_BG}`,\n  },\n  bottom: {\n    left: \"50%\",\n    top: -10,\n    transform: \"translateX(-50%)\",\n    borderLeft: \"9px solid transparent\",\n    borderRight: \"9px solid transparent\",\n    borderBottom: `10px solid ${BASE_BG}`,\n  },\n};\n\nconst TourGuideTooltip = forwardRef(function TourGuideTooltip(\n  {\n    title,\n    description,\n    step,\n    total,\n    onNext,\n    onSkip,\n    position = \"left\",\n    className = \"\",\n    style,\n    showArrow = true,\n    anchorId,\n    gap = 8,\n    showBackdrop = false,\n    backdropBlur = 0,\n    backdropOpacity = 0.2,\n    backdropClassName = \"\",\n    backdropStyle,\n    usePortal = false,\n    portalContainer,\n    zIndex = 1100,\n    backdropZIndex,\n    highlightAnchor = false,\n    highlightPadding = 6,\n    autoFlip = false,\n    viewportPadding = 12,\n    nextLabel = \"Next\",\n    skipLabel = \"Skip\",\n  },\n  ref\n) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const [anchorRect, setAnchorRect] = React.useState(null);\n  const [activePosition, setActivePosition] = React.useState(position);\n\n  React.useEffect(() => {\n    setActivePosition(position);\n  }, [position]);\n\n  React.useEffect(() => {\n    if (!anchorId) return undefined;\n\n    const updateRect = () => {\n      const target = document.getElementById(anchorId);\n      if (!target) {\n        setAnchorRect(null);\n        return;\n      }\n      const rect = target.getBoundingClientRect();\n      const nextRect = {\n        left: rect.left,\n        right: rect.right,\n        top: rect.top,\n        bottom: rect.bottom,\n        centerX: rect.left + rect.width / 2,\n        centerY: rect.top + rect.height / 2,\n      };\n      setAnchorRect(nextRect);\n      if (autoFlip) {\n        setActivePosition(\n          getBestPosition(nextRect, position, gap, viewportPadding)\n        );\n      }\n    };\n\n    updateRect();\n    window.addEventListener(\"resize\", updateRect);\n    window.addEventListener(\"scroll\", updateRect, true);\n    const timer = window.setInterval(updateRect, 120);\n\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n      window.removeEventListener(\"scroll\", updateRect, true);\n      window.clearInterval(timer);\n    };\n  }, [anchorId, autoFlip, gap, position, viewportPadding]);\n\n  React.useEffect(() => {\n    if (!anchorId || !highlightAnchor) return undefined;\n\n    const target = document.getElementById(anchorId);\n    if (!target) return undefined;\n\n    const previousOutline = target.style.outline;\n    const previousOutlineOffset = target.style.outlineOffset;\n    const previousBorderRadius = target.style.borderRadius;\n    const previousPosition = target.style.position;\n    const previousZIndex = target.style.zIndex;\n    const computedBorderRadius = window.getComputedStyle(target).borderRadius;\n\n    target.style.outline = `${Math.max(highlightPadding, 0)}px solid rgba(0, 166, 110, 0.35)`;\n    target.style.outlineOffset = \"0px\";\n    target.style.borderRadius = computedBorderRadius;\n    if (!previousPosition) target.style.position = \"relative\";\n    target.style.zIndex = String(zIndex + 1);\n\n    return () => {\n      target.style.outline = previousOutline;\n      target.style.outlineOffset = previousOutlineOffset;\n      target.style.borderRadius = previousBorderRadius;\n      target.style.position = previousPosition;\n      target.style.zIndex = previousZIndex;\n    };\n  }, [anchorId, highlightAnchor, highlightPadding, zIndex]);\n\n  const setRefs = React.useCallback(\n    (node) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref && typeof ref === \"object\") {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  const resolvedBackdropZIndex =\n    typeof backdropZIndex === \"number\" ? backdropZIndex : zIndex - 1;\n  const resolvedPosition = autoFlip ? activePosition : position;\n  const resolvedPortalContainer =\n    portalContainer ||\n    (typeof document !== \"undefined\" ? document.body : null);\n\n  const tooltipNode = (\n    <div\n      ref={setRefs}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-labelledby={titleId}\n      aria-describedby={descriptionId}\n      className={className}\n      style={{\n        zIndex,\n        ...(anchorId && anchorRect\n          ? getFixedPositionStyle(anchorRect, resolvedPosition, gap)\n          : { position: \"absolute\", ...wrapperStyleByPosition[resolvedPosition] }),\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          ...cardStyle,\n          width: CARD_W,\n          minHeight: CARD_MIN_H,\n          background: BASE_BG,\n          border: `0.5px solid ${BASE_BORDER}`,\n        }}\n      >\n        {showArrow && (\n          <>\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowOuterByPosition[resolvedPosition],\n              }}\n            />\n            <span\n              style={{\n                position: \"absolute\",\n                width: 0,\n                height: 0,\n                ...arrowInnerByPosition[resolvedPosition],\n              }}\n            />\n          </>\n        )}\n\n        <div style={contentStyle}>\n          <h3 id={titleId} style={titleStyle}>\n            {title}\n          </h3>\n\n          <p id={descriptionId} style={descriptionStyle}>\n            {description}\n          </p>\n\n          <div style={footerStyle}>\n            <span aria-label={`Step ${step} of ${total}`} style={stepStyle}>\n              {step} of {total}\n            </span>\n\n            <div style={actionsStyle}>\n              <button\n                type=\"button\"\n                onClick={onSkip}\n                aria-label=\"Skip tour\"\n                style={skipButtonStyle}\n              >\n                {skipLabel}\n              </button>\n\n              <button\n                type=\"button\"\n                onClick={onNext}\n                aria-label={`Go to next step (${step + 1} of ${total})`}\n                style={nextButtonStyle}\n              >\n                {nextLabel}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  const backdropNode = showBackdrop ? (\n    <div\n      className={backdropClassName}\n      aria-hidden=\"true\"\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        zIndex: resolvedBackdropZIndex,\n        background: `rgba(0, 0, 0, ${backdropOpacity})`,\n        backdropFilter: backdropBlur ? `blur(${backdropBlur}px)` : undefined,\n        WebkitBackdropFilter: backdropBlur\n          ? `blur(${backdropBlur}px)`\n          : undefined,\n        ...backdropStyle,\n      }}\n    />\n  ) : null;\n\n  const content = (\n    <>\n      {backdropNode}\n      {tooltipNode}\n    </>\n  );\n\n  if (usePortal && resolvedPortalContainer) {\n    return createPortal(content, resolvedPortalContainer);\n  }\n\n  return content;\n});\n\nexport default TourGuideTooltip;\n\n"],"names":["CARD_W","CARD_MIN_H","BASE_BG","BASE_BORDER","wrapperStyleByPosition","getFixedPositionStyle","rect","position","gap","getFallbackPosition","getBestPosition","preferredPosition","viewportPadding","viewportWidth","viewportHeight","fits","opposite","cardStyle","contentStyle","titleStyle","descriptionStyle","footerStyle","stepStyle","actionsStyle","skipButtonStyle","nextButtonStyle","arrowOuterByPosition","arrowInnerByPosition","TourGuideTooltip","forwardRef","title","description","step","total","onNext","onSkip","className","style","showArrow","anchorId","showBackdrop","backdropBlur","backdropOpacity","backdropClassName","backdropStyle","usePortal","portalContainer","zIndex","backdropZIndex","highlightAnchor","highlightPadding","autoFlip","nextLabel","skipLabel","ref","titleId","useId","descriptionId","anchorRect","setAnchorRect","React","activePosition","setActivePosition","updateRect","target","nextRect","timer","previousOutline","previousOutlineOffset","previousBorderRadius","previousPosition","previousZIndex","computedBorderRadius","setRefs","node","resolvedBackdropZIndex","resolvedPosition","resolvedPortalContainer","tooltipNode","jsx","jsxs","Fragment","backdropNode","content","createPortal"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/common/TourGuideTooltip.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useId } from "react";
+import { createPortal } from "react-dom";
 
 const CARD_W = 230;
 const CARD_MIN_H = 141;
@@ -48,6 +49,33 @@ function getFixedPositionStyle(rect, position, gap) {
   };
 }
 
+function getFallbackPosition(position) {
+  if (position === "left") return "right";
+  if (position === "right") return "left";
+  if (position === "top") return "bottom";
+  return "top";
+}
+
+function getBestPosition(rect, preferredPosition, gap, viewportPadding) {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const fits = {
+    left: rect.left >= CARD_W + gap + viewportPadding,
+    right: viewportWidth - rect.right >= CARD_W + gap + viewportPadding,
+    top: rect.top >= CARD_MIN_H + gap + viewportPadding,
+    bottom: viewportHeight - rect.bottom >= CARD_MIN_H + gap + viewportPadding,
+  };
+
+  if (fits[preferredPosition]) return preferredPosition;
+  const opposite = getFallbackPosition(preferredPosition);
+  if (fits[opposite]) return opposite;
+  if (fits.right) return "right";
+  if (fits.left) return "left";
+  if (fits.bottom) return "bottom";
+  if (fits.top) return "top";
+  return preferredPosition;
+}
+
 const cardStyle = {
   position: "relative",
   borderRadius: 12,
@@ -208,12 +236,32 @@ const TourGuideTooltip = forwardRef(function TourGuideTooltip(
     showArrow = true,
     anchorId,
     gap = 8,
+    showBackdrop = false,
+    backdropBlur = 0,
+    backdropOpacity = 0.2,
+    backdropClassName = "",
+    backdropStyle,
+    usePortal = false,
+    portalContainer,
+    zIndex = 1100,
+    backdropZIndex,
+    highlightAnchor = false,
+    highlightPadding = 6,
+    autoFlip = false,
+    viewportPadding = 12,
+    nextLabel = "Next",
+    skipLabel = "Skip",
   },
   ref
 ) {
   const titleId = useId();
   const descriptionId = useId();
   const [anchorRect, setAnchorRect] = React.useState(null);
+  const [activePosition, setActivePosition] = React.useState(position);
+
+  React.useEffect(() => {
+    setActivePosition(position);
+  }, [position]);
 
   React.useEffect(() => {
     if (!anchorId) return undefined;
@@ -225,14 +273,20 @@ const TourGuideTooltip = forwardRef(function TourGuideTooltip(
         return;
       }
       const rect = target.getBoundingClientRect();
-      setAnchorRect({
+      const nextRect = {
         left: rect.left,
         right: rect.right,
         top: rect.top,
         bottom: rect.bottom,
         centerX: rect.left + rect.width / 2,
         centerY: rect.top + rect.height / 2,
-      });
+      };
+      setAnchorRect(nextRect);
+      if (autoFlip) {
+        setActivePosition(
+          getBestPosition(nextRect, position, gap, viewportPadding)
+        );
+      }
     };
 
     updateRect();
@@ -245,21 +299,67 @@ const TourGuideTooltip = forwardRef(function TourGuideTooltip(
       window.removeEventListener("scroll", updateRect, true);
       window.clearInterval(timer);
     };
-  }, [anchorId]);
+  }, [anchorId, autoFlip, gap, position, viewportPadding]);
+
+  React.useEffect(() => {
+    if (!anchorId || !highlightAnchor) return undefined;
+
+    const target = document.getElementById(anchorId);
+    if (!target) return undefined;
+
+    const previousOutline = target.style.outline;
+    const previousOutlineOffset = target.style.outlineOffset;
+    const previousBorderRadius = target.style.borderRadius;
+    const previousPosition = target.style.position;
+    const previousZIndex = target.style.zIndex;
+    const computedBorderRadius = window.getComputedStyle(target).borderRadius;
+
+    target.style.outline = `${Math.max(highlightPadding, 0)}px solid rgba(0, 166, 110, 0.35)`;
+    target.style.outlineOffset = "0px";
+    target.style.borderRadius = computedBorderRadius;
+    if (!previousPosition) target.style.position = "relative";
+    target.style.zIndex = String(zIndex + 1);
+
+    return () => {
+      target.style.outline = previousOutline;
+      target.style.outlineOffset = previousOutlineOffset;
+      target.style.borderRadius = previousBorderRadius;
+      target.style.position = previousPosition;
+      target.style.zIndex = previousZIndex;
+    };
+  }, [anchorId, highlightAnchor, highlightPadding, zIndex]);
 
-  return (
+  const setRefs = React.useCallback(
+    (node) => {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref && typeof ref === "object") {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+
+  const resolvedBackdropZIndex =
+    typeof backdropZIndex === "number" ? backdropZIndex : zIndex - 1;
+  const resolvedPosition = autoFlip ? activePosition : position;
+  const resolvedPortalContainer =
+    portalContainer ||
+    (typeof document !== "undefined" ? document.body : null);
+
+  const tooltipNode = (
     <div
-      ref={ref}
+      ref={setRefs}
       role="dialog"
       aria-modal="false"
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
       className={className}
       style={{
-        zIndex: 1100,
+        zIndex,
         ...(anchorId && anchorRect
-          ? getFixedPositionStyle(anchorRect, position, gap)
-          : { position: "absolute", ...wrapperStyleByPosition[position] }),
+          ? getFixedPositionStyle(anchorRect, resolvedPosition, gap)
+          : { position: "absolute", ...wrapperStyleByPosition[resolvedPosition] }),
         ...style,
       }}
     >
@@ -279,7 +379,7 @@ const TourGuideTooltip = forwardRef(function TourGuideTooltip(
                 position: "absolute",
                 width: 0,
                 height: 0,
-                ...arrowOuterByPosition[position],
+                ...arrowOuterByPosition[resolvedPosition],
               }}
             />
             <span
@@ -287,7 +387,7 @@ const TourGuideTooltip = forwardRef(function TourGuideTooltip(
                 position: "absolute",
                 width: 0,
                 height: 0,
-                ...arrowInnerByPosition[position],
+                ...arrowInnerByPosition[resolvedPosition],
               }}
             />
           </>
@@ -314,23 +414,54 @@ const TourGuideTooltip = forwardRef(function TourGuideTooltip(
                 aria-label="Skip tour"
                 style={skipButtonStyle}
               >
-                Skip
+                {skipLabel}
               </button>
 
-                <button
-                  type="button"
-                  onClick={onNext}
-                  aria-label={`Go to next step (${step + 1} of ${total})`}
-                  style={nextButtonStyle}
-                >
-                  Next
-                </button>
+              <button
+                type="button"
+                onClick={onNext}
+                aria-label={`Go to next step (${step + 1} of ${total})`}
+                style={nextButtonStyle}
+              >
+                {nextLabel}
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
   );
+
+  const backdropNode = showBackdrop ? (
+    <div
+      className={backdropClassName}
+      aria-hidden="true"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: resolvedBackdropZIndex,
+        background: `rgba(0, 0, 0, ${backdropOpacity})`,
+        backdropFilter: backdropBlur ? `blur(${backdropBlur}px)` : undefined,
+        WebkitBackdropFilter: backdropBlur
+          ? `blur(${backdropBlur}px)`
+          : undefined,
+        ...backdropStyle,
+      }}
+    />
+  ) : null;
+
+  const content = (
+    <>
+      {backdropNode}
+      {tooltipNode}
+    </>
+  );
+
+  if (usePortal && resolvedPortalContainer) {
+    return createPortal(content, resolvedPortalContainer);
+  }
+
+  return content;
 });
 
 export default TourGuideTooltip;