@neut/ui 0.0.9 → 0.0.10

package/dist/components/tooltip/TooltipContent/TooltipContent.js

@@ -1,76 +1,90 @@
-import { clsx as e } from "../../../utils/clsx.js";
-import { useTooltipContext as t } from "../Tooltip/Tooltip.context.js";
-import { TooltipContentContext as n } from "./TooltipContent.context.js";
+import { getAlignment as e, getSide as t } from "../../../lib/positioner/core/placement.js";
+import { getTransformOrigin as n } from "./TooltipContent.utils.js";
 import { useTooltipContent as r } from "./useTooltipContent.js";
-import { Portal as i, createComponent as a, insert as o, mergeProps as s, spread as c, template as l, use as u } from "solid-js/web";
-import { Show as d, createMemo as f, createSignal as p, mergeProps as m, splitProps as h } from "solid-js";
+import { TooltipContentContext as i } from "./TooltipContent.context.js";
+import { Portal as a, createComponent as o, effect as s, insert as c, mergeProps as l, setAttribute as u, spread as d, style as f, template as p, use as m } from "solid-js/web";
+import { Show as h, onCleanup as g, splitProps as _ } from "solid-js";
 //#region src/components/tooltip/TooltipContent/TooltipContent.tsx
-var g = /* @__PURE__ */ l("<div data-slot=tooltip-content role=tooltip>"), _ = (l) => {
-	let _ = t(), [v, y] = h(m({
-		side: "top",
-		align: "center",
-		alignOffset: 0,
-		sideOffset: 4
-	}, l), [
+var v = /*#__PURE__*/ p("<div style=z-index:1000><div><div role=tooltip>");
+function y(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function b(p) {
+	let { ctx: b, pos: x, mounted: S, animationState: C, setArrowElement: w, setContentElement: T, slideStyle: E } = r(() => p), [D, O] = _(p, [
 		"side",
 		"align",
-		"alignOffset",
 		"sideOffset",
+		"alignOffset",
+		"collisionPadding",
 		"class",
-		"classList",
+		"style",
 		"children"
-	]), [b, x] = p(), { shouldRender: S, position: C } = r(b, () => v), w = f(() => _.open());
-	return a(d, {
+	]);
+	return o(h, {
 		get when() {
 			return S();
 		},
 		get children() {
-			return a(i, { get children() {
-				var t = g();
-				return u(x, t), c(t, s({
-					get "data-open"() {
-						return w() || void 0;
+			return o(a, { get children() {
+				var r = v(), a = r.firstChild, p = a.firstChild;
+				return m((e) => {
+					b.setFloating(e), g(() => b.setFloating(void 0));
+				}, r), m(T, p), d(p, l({
+					get id() {
+						return b.contentId;
 					},
-					get "data-closed"() {
-						return !w() || void 0;
-					},
-					get "data-align"() {
-						return C.align;
+					get "data-state"() {
+						return C();
 					},
 					get "data-side"() {
-						return C.side;
+						return t(x.placement());
 					},
-					get id() {
-						return _.contentId;
+					get "data-align"() {
+						return e(x.placement()) ?? "center";
 					},
-					get class() {
-						return e("fixed z-50 pointer-events-none inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-neutral-950 dark:bg-neutral-50 px-3 py-1.5 text-xs text-white dark:text-neutral-950 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", v.class);
+					get onMouseEnter() {
+						return b.keepOpen;
+					},
+					get onMouseLeave() {
+						return b.requestClose;
 					},
 					get style() {
 						return {
-							top: `${C.top}px`,
-							left: `${C.left}px`,
-							visibility: C.top === 0 ? "hidden" : "visible"
+							"transform-origin": n(x.placement()),
+							...typeof D.style == "object" ? D.style : void 0
 						};
+					},
+					get class() {
+						return y("max-w-xs rounded-md px-3 py-1.5 text-xs leading-relaxed shadow-md", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "bg-foreground text-background", D.class);
 					}
-				}, y), !1, !0), o(t, a(n.Provider, {
-					value: {
-						get side() {
-							return C.side;
-						},
-						get align() {
-							return C.align;
-						}
+				}, O), !1, !0), c(p, o(i.Provider, {
+					get value() {
+						return {
+							middlewareData: x.middlewareData,
+							placement: x.placement,
+							setArrowElement: w,
+							animationState: C
+						};
 					},
 					get children() {
-						return v.children;
+						return D.children;
 					}
-				})), t;
+				})), s((e) => {
+					var t = x.placement(), n = {
+						...x.floatingStyles(),
+						opacity: +!!x.isPositioned()
+					}, i = E();
+					return t !== e.e && u(r, "data-placement", e.e = t), e.t = f(r, n, e.t), e.a = f(a, i, e.a), e;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				}), r;
 			} });
 		}
 	});
-};
+}
 //#endregion
-export { _ as TooltipContent };
+export { b as TooltipContent };
 
 //# sourceMappingURL=TooltipContent.js.map

package/dist/components/tooltip/TooltipContent/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.js","names":["createMemo","createSignal","mergeProps","Show","splitProps","useTooltipContext","Portal","TooltipContentProps","clsx","TooltipContentContext","useTooltipContent","TooltipContent","props","ctx","merged","side","align","alignOffset","sideOffset","const","local","others","ref","setRef","HTMLDivElement","shouldRender","position","isOpen","open","_$createComponent","when","children","_el$","_tmpl$","_$use","_$spread","_$mergeProps","data-open","undefined","data-closed","data-align","data-side","id","contentId","class","style","top","left","visibility","_$insert","Provider","value"],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  Show,\n  splitProps,\n} from \"solid-js\";\nimport { useTooltipContext } from \"../Tooltip/Tooltip.context\";\nimport { Portal } from \"solid-js/web\";\nimport type { TooltipContentProps } from \"./TooltipContent.types\";\nimport { clsx } from \"~/utils\";\nimport { TooltipContentContext } from \"./TooltipContent.context\";\nimport { useTooltipContent } from \"./useTooltipContent\";\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n  const ctx = useTooltipContext();\n\n  const merged = mergeProps(\n    { side: \"top\", align: \"center\", alignOffset: 0, sideOffset: 4 } as const,\n    props,\n  );\n  const [local, others] = splitProps(merged, [\n    \"side\",\n    \"align\",\n    \"alignOffset\",\n    \"sideOffset\",\n    \"class\",\n    \"classList\",\n    \"children\",\n  ]);\n\n  const [ref, setRef] = createSignal<HTMLDivElement>();\n\n  const { shouldRender, position } = useTooltipContent(ref, () => local);\n\n  const isOpen = createMemo(() => ctx.open());\n\n  return (\n    <Show when={shouldRender()}>\n      <Portal>\n        <div\n          ref={setRef}\n          data-slot=\"tooltip-content\"\n          data-open={isOpen() || undefined}\n          data-closed={!isOpen() || undefined}\n          data-align={position.align}\n          data-side={position.side}\n          id={ctx.contentId}\n          role=\"tooltip\"\n          class={clsx(\n            \"fixed z-50 pointer-events-none inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-neutral-950 dark:bg-neutral-50 px-3 py-1.5 text-xs text-white dark:text-neutral-950 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            local.class,\n          )}\n          style={{\n            top: `${position.top}px`,\n            left: `${position.left}px`,\n            visibility: position.top === 0 ? \"hidden\" : \"visible\",\n          }}\n          {...others}\n        >\n          <TooltipContentContext.Provider\n            value={{\n              get side() {\n                return position.side;\n              },\n              get align() {\n                return position.align;\n              },\n            }}\n          >\n            {local.children}\n          </TooltipContentContext.Provider>\n        </div>\n      </Portal>\n    </Show>\n  );\n};\n"],"mappings":";;;;;;;2EAcaW,KAAkBC,MAA+B;CAC5D,IAAMC,IAAMR,GAAmB,EAMzB,CAACe,GAAOC,KAAUjB,EAJTF,EACb;EAAEa,MAAM;EAAOC,OAAO;EAAUC,aAAa;EAAGC,YAAY;EAAG,EAC/DN,EACD,EAC0C;EACzC;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EAEI,CAACU,GAAKC,KAAUtB,GAA8B,EAE9C,EAAEwB,iBAAcC,gBAAahB,EAAkBY,SAAWF,EAAM,EAEhEO,IAAS3B,QAAiBa,EAAIe,MAAM,CAAC;AAE3C,QAAAC,EACG1B,GAAI;EAAA,IAAC2B,OAAI;AAAA,UAAEL,GAAc;;EAAA,IAAAM,WAAA;AAAA,UAAAF,EACvBvB,GAAM,EAAA,IAAAyB,WAAA;IAAA,IAAAC,IAAAC,GAAA;AA+Bc,WA/BdC,EAEEX,GAAMS,EAAA,EAAAG,EAAAH,GAAAI,EAAA;KAAA,IAAA,cAAA;AAAA,aAEAT,GAAQ,IAAIW,KAAAA;;KAAS,IAAA,gBAAA;AAAA,aACnB,CAACX,GAAQ,IAAIW,KAAAA;;KAAS,IAAA,eAAA;AAAA,aACvBZ,EAASV;;KAAK,IAAA,cAAA;AAAA,aACfU,EAASX;;KAAI,IACxB2B,KAAE;AAAA,aAAE7B,EAAI8B;;KAAS,IAAA,QAAA;AAAA,aAEVnC,EACL,k0BACAY,EAAMwB,MACP;;KAAA,IACDC,QAAK;AAAA,aAAE;OACLC,KAAK,GAAGpB,EAASoB,IAAG;OACpBC,MAAM,GAAGrB,EAASqB,KAAI;OACtBC,YAAYtB,EAASoB,QAAQ,IAAI,WAAW;OAC7C;;KAAA,EACGzB,EAAM,EAAA,IAAA,GAAA,EAAA4B,EAAAjB,GAAAH,EAETpB,EAAsByC,UAAQ;KAC7BC,OAAO;MACL,IAAIpC,OAAO;AACT,cAAOW,EAASX;;MAElB,IAAIC,QAAQ;AACV,cAAOU,EAASV;;MAEnB;KAAA,IAAAe,WAAA;AAAA,aAEAX,EAAMW;;KAAQ,CAAA,CAAA,EAAAC;MAAA,CAAA;;EAAA,CAAA"}
+{"version":3,"file":"TooltipContent.js","names":["Show","onCleanup","splitProps","Portal","useTooltipContent","TooltipContentContext","getTransformOrigin","getSide","getAlignment","TooltipContentProps","cn","classes","Array","filter","Boolean","join","TooltipContent","props","ctx","pos","mounted","animationState","setArrowElement","setContentElement","slideStyle","local","rest","_$createComponent","when","children","_el$","_tmpl$","_el$2","firstChild","_el$3","_$use","el","setFloating","undefined","_$spread","_$mergeProps","id","contentId","data-state","data-side","placement","data-align","onMouseEnter","keepOpen","onMouseLeave","requestClose","style","class","_$insert","Provider","value","middlewareData","_$effect","_p$","_v$","_v$2","floatingStyles","opacity","isPositioned","_v$3","e","_$setAttribute","t","_$style","a"],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.tsx"],"sourcesContent":["import { Show, onCleanup, splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { useTooltipContent } from \"./useTooltipContent\";\nimport { TooltipContentContext } from \"./TooltipContent.context\";\nimport { getTransformOrigin } from \"./TooltipContent.utils\";\nimport { getSide, getAlignment } from \"~/lib\";\nimport type { TooltipContentProps } from \"./TooltipContent.types\";\n\nfunction cn(...classes: Array<string | false | undefined | null>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n\n/**\n * Tooltip 的浮层内容。挂 Portal 到 body，用 position:fixed 定位。\n *\n * 内容本身默认是可以 hover 的（不是 pointer-events:none）：鼠标移进 content\n * 会取消待执行的关闭计时器（ctx.keepOpen），移出才真正走 closeDelay 关闭——\n * 这样用户可以把鼠标从 trigger 移动到 tooltip 上选中里面的文字，不会因为\n * \"离开 trigger 就关闭\" 而选不到。如果你的 tooltip 内容很简单、不需要这个特性，\n * 可以自己在外面包一层设置 pointer-events: none。\n */\nexport function TooltipContent(props: TooltipContentProps) {\n  const {\n    ctx,\n    pos,\n    mounted,\n    animationState,\n    setArrowElement,\n    setContentElement,\n    slideStyle,\n  } = useTooltipContent(() => props);\n\n  // 只摘出内部要单独处理的几个字段，剩下的（style、data-*、onXxx 等任意原生\n  // prop）原样透传给内层元素——和 TooltipTrigger 是同一套约定。\n  const [local, rest] = splitProps(props, [\n    \"side\",\n    \"align\",\n    \"sideOffset\",\n    \"alignOffset\",\n    \"collisionPadding\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  return (\n    <Show when={mounted()}>\n      <Portal>\n        {/*\n          外层：只负责定位（position:fixed 来自 floatingStyles），不设 overflow，\n          也不参与任何动画——它的 transform 已经被占用来做定位（translate(x,y)），\n          如果别的动画也要控制 transform 会互相冲突，所以动画都放在下面两层。\n        */}\n        <div\n          ref={(el) => {\n            ctx.setFloating(el);\n            // Solid 的 ref 回调只在元素创建时触发一次，元素被移除时不会自动\n            // 再调用一次传 undefined（这是 React 的约定，不是 Solid 的）。\n            // 不手动清空的话，ctx.floating() 会一直指向一个已经从 DOM 里\n            // 摘除的\"僵尸节点\"，直到下次重新打开——期间如果被别处读取\n            // （比如 TooltipGroup 抢占时读取矩形），getBoundingClientRect()\n            // 对一个 detached 元素规范规定就是返回全 0 的矩形，会造成\n            // \"滑动效果从左上角(0,0)滑入\"这种明显错误的观感。\n            onCleanup(() => ctx.setFloating(undefined));\n          }}\n          data-placement={pos.placement()}\n          style={{\n            ...pos.floatingStyles(),\n            \"z-index\": 1000,\n            opacity: pos.isPositioned() ? 1 : 0,\n          }}\n        >\n          {/*\n            滑动层：命中 <TooltipGroup> 抢占时，用来把整个 tooltip（内容+箭头）\n            从旧 tooltip 的位置平移过来（FLIP 技术，细节见 useTooltipContent 里\n            的 slideOffset 计算）。平时 slideStyle() 是空对象，这一层形同不存在。\n\n            这一层必须夹在\"定位层\"和\"样式/动画层\"之间、而不是随便找个地方加：\n            它自己也会用到 transform（滑动过程中），如果和定位层共用一个元素会\n            跟 translate(x,y) 冲突（原因同上）；但它又不能在样式层（overflow:auto\n            那层）的下面/内部，因为箭头的 position:absolute 是故意跳过样式层、\n            以\"最近的已定位祖先\"为基准的（这是修复箭头戳出来触发滚动条那次的\n            设计），如果滑动层的 transform 出现在样式层内部，箭头的定位基准就会\n            变成滑动层而不是外层——效果上依然正确（滑动层的盒子和外层几乎重合），\n            但为了让\"定位基准\"这件事始终清晰、不产生\"技术上是谁、视觉上又是谁\"\n            的心智负担，把滑动层放在外层和样式层之间、维持这条链路的清晰顺序。\n          */}\n          <div style={slideStyle()}>\n            {/*\n              内层：真正的视觉样式 + 进出场动画。\n              data-state 跟着 animationState 走（不是 isVisible/mounted）：\n              - isVisible 变 false 的瞬间，animationState 立刻跟着变 closed，\n                触发退场动画的 class；\n              - isVisible 变 true 时，animationState 会晚一帧才变 open，\n                留出时间让箭头（TooltipArrow）完成挂载、注册给 arrow middleware、\n                算出正确的位置偏移（细节见 useTooltipContent 里的注释）；\n              - mounted 会比 animationState 变 closed 更晚才变 false（见下面的\n                Presence 逻辑），留出时间让退场动画播完。\n\n              data-[state=open]/data-[state=closed] 这套 class 依赖 tailwindcss-animate\n              插件提供的 animate-in/animate-out/fade-in-0/zoom-in-95 等工具类——\n              如果你的项目还没装，`npm install tailwindcss-animate` 并在 tailwind\n              config 里加上这个 plugin 即可；不想装的话，把这几个 data-[state=...]\n              class 换成你自己写的 @keyframes + 对应 class 也一样能工作，\n              Presence 逻辑（mounted 延迟卸载）不依赖具体用了哪套动画实现。\n\n              箭头（TooltipArrow）不依赖\"作为这个元素的子节点、被动继承这里的\n              transform/opacity 动画\"这种隐式机制——它自己也从 context 里读到\n              同一个 animationState，独立播放一份自己的入场/退场动画，两者由\n              同一个信号同步触发。\n\n              data-side/data-align 是从最终生效的 placement 拆出来的，驱动上面\n              这几条方向感知的 slide-in class，也顺带给 transform-origin 提供了\n              依据——缩放动画的锚点会落在\"贴近 trigger 的那条边\"上（细节见\n              TooltipContent.utils.ts 里的 getTransformOrigin），而不是默认的\n              几何中心，这样整个入场效果才会像是\"从 trigger 那里长出来\"，\n              贴近 shadcn 的实际观感。\n\n              特意没有 overflow:auto / max-height，tooltip 不支持内容超长时滚动——\n              宽度上限靠下面静态的 max-w-xs class 兜底，让文字自然换行；高度完全\n              不做限制。这不只是为了贴近 shadcn/Radix 的行为（它们的 tooltip 也不\n              允许滚动），还避免了一个真实踩过的坑：overflow:auto 配合这里的\n              zoom-in-95 动画（会给这个元素加一个非 none 的 transform，CSS 规范\n              规定这会让它变成子元素新的包含块）曾经导致箭头戳出边缘的那部分被\n              误判成\"可滚动溢出\"，表现为打开瞬间闪一下滚动条、箭头跟着被遮住，\n              动画播完滚动条消失、箭头才重新出现。去掉滚动能力后这个耦合从根上\n              就不存在了。\n            */}\n            <div\n              ref={setContentElement}\n              id={ctx.contentId}\n              role=\"tooltip\"\n              data-state={animationState()}\n              data-side={getSide(pos.placement())}\n              data-align={getAlignment(pos.placement()) ?? \"center\"}\n              onMouseEnter={ctx.keepOpen}\n              onMouseLeave={ctx.requestClose}\n              style={{\n                \"transform-origin\": getTransformOrigin(pos.placement()),\n                ...(typeof local.style === \"object\" ? local.style : undefined),\n              }}\n              class={cn(\n                \"max-w-xs rounded-md px-3 py-1.5 text-xs leading-relaxed shadow-md\",\n                \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n                \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n                // 方向感知的滑入：不只是原地淡入缩放，还从\"贴近 trigger 的反方向\"\n                // 轻微位移过来——比如 placement 是 top（content 在 trigger 上方），\n                // 就从下方 8px（slide-in-from-bottom-2）滑上来，视觉上更像是从\n                // trigger 那里\"冒出来\"，而不是凭空原地出现。只在打开时生效，\n                // 贴近 shadcn 的实际行为（它们的退场动画没有对应的滑出位移）。\n                \"data-[side=top]:slide-in-from-bottom-2\",\n                \"data-[side=bottom]:slide-in-from-top-2\",\n                \"data-[side=left]:slide-in-from-right-2\",\n                \"data-[side=right]:slide-in-from-left-2\",\n                \"bg-foreground text-background\",\n                local.class,\n              )}\n              {...rest}\n            >\n              <TooltipContentContext.Provider\n                value={{\n                  middlewareData: pos.middlewareData,\n                  placement: pos.placement,\n                  setArrowElement,\n                  animationState,\n                }}\n              >\n                {local.children}\n              </TooltipContentContext.Provider>\n            </div>\n          </div>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAASU,EAAG,GAAGC,GAA2D;CACxE,OAAOA,EAAQE,OAAOC,OAAO,CAAC,CAACC,KAAK,GAAG;AACzC;AAWA,SAAgBC,EAAeC,GAA4B;CACzD,IAAM,EACJC,QACAC,QACAC,YACAC,mBACAC,oBACAC,sBACAC,kBACEpB,QAAwBa,CAAK,GAI3B,CAACQ,GAAOC,KAAQxB,EAAWe,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,OAAAU,EACG3B,GAAI;EAAA,IAAC4B,OAAI;GAAA,OAAER,EAAQ;EAAC;EAAA,IAAAS,WAAA;GAAA,OAAAF,EAClBxB,GAAM,EAAA,IAAA0B,WAAA;IAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;IAwCqB,OAxCrBE,GAOGC,MAAO;KASXnC,AARAiB,EAAImB,YAAYD,CAAE,GAQlBnC,QAAgBiB,EAAImB,YAAYC,KAAAA,CAAS,CAAC;IAC5C,GAACR,CAAA,GAAAK,EAiEQZ,GAAiBW,CAAA,GAAAK,EAAAL,GAAAM,EAAA;KAAA,IACtBC,KAAE;MAAA,OAAEvB,EAAIwB;KAAS;KAAA,IAAA,eAAA;MAAA,OAELrB,EAAe;KAAC;KAAA,IAAA,cAAA;MAAA,OACjBd,EAAQY,EAAI0B,UAAU,CAAC;KAAC;KAAA,IAAA,eAAA;MAAA,OACvBrC,EAAaW,EAAI0B,UAAU,CAAC,KAAK;KAAQ;KAAA,IACrDE,eAAY;MAAA,OAAE7B,EAAI8B;KAAQ;KAAA,IAC1BC,eAAY;MAAA,OAAE/B,EAAIgC;KAAY;KAAA,IAC9BC,QAAK;MAAA,OAAE;OACL,oBAAoB7C,EAAmBa,EAAI0B,UAAU,CAAC;OACtD,GAAI,OAAOpB,EAAM0B,SAAU,WAAW1B,EAAM0B,QAAQb,KAAAA;MACtD;KAAC;KAAA,IAAA,QAAA;MAAA,OACM5B,EACL,qEACA,yFACA,kGAMA,0CACA,0CACA,0CACA,0CACA,iCACAe,EAAM2B,KACR;KAAC;IAAA,GACG1B,CAAI,GAAA,IAAA,EAAA,GAAA2B,EAAAnB,GAAAP,EAEPtB,EAAsBiD,UAAQ;KAAA,IAC7BC,QAAK;MAAA,OAAE;OACLC,gBAAgBrC,EAAIqC;OACpBX,WAAW1B,EAAI0B;OACfvB;OACAD;MACF;KAAC;KAAA,IAAAQ,WAAA;MAAA,OAEAJ,EAAMI;KAAQ;IAAA,CAAA,CAAA,GAAA4B,GAAAC,MAAA;KAAA,IAAAC,IAtGLxC,EAAI0B,UAAU,GAACe,IACxB;MACL,GAAGzC,EAAI0C,eAAe;MAEtBC,SAAS3C,KAAI4C,aAAa;KAC5B,GAACC,IAiBWxC,EAAW;KAAC,OAAAmC,MAAAD,EAAAO,KAAAC,EAAApC,GAAA,kBAAA4B,EAAAO,IAAAN,CAAA,GAAAD,EAAAS,IAAAC,EAAAtC,GAAA8B,GAAAF,EAAAS,CAAA,GAAAT,EAAAW,IAAAD,EAAApC,GAAAgC,GAAAN,EAAAW,CAAA,GAAAX;IAAA,GAAA;KAAAO,GAAA3B,KAAAA;KAAA6B,GAAA7B,KAAAA;KAAA+B,GAAA/B,KAAAA;IAAA,CAAA,GAAAR;GAAA,EAAA,CAAA;EAAA;CAAA,CAAA;AAwFlC"}

package/dist/components/tooltip/TooltipContent/TooltipContent.types.d.ts

@@ -1,9 +1,19 @@
+import { Alignment, Side } from '../../../lib';
 import { BaseProps, PolymorphicProps } from '../../../types';
 interface BaseTooltipContentProps extends BaseProps {
-    side?: "top" | "bottom" | "left" | "right";
-    align?: "start" | "center" | "end";
-    alignOffset?: number;
+    /** 贴 trigger 的哪一侧，默认 'top' */
+    side?: Side;
+    /** 沿边对齐方式，默认 'center'（不偏移，居中对齐） */
+    align?: Alignment | "center";
+    /** 沿主轴（side 指向的方向）与 trigger 之间的间距（像素），默认 8 */
     sideOffset?: number;
+    /**
+     * 沿交叉轴（对齐方向）的偏移（像素），默认 0——align 是 'start'/'end' 时
+     * 微调对齐位置用。底层直接对应 offset middleware 的 crossAxis。
+     */
+    alignOffset?: number;
+    /** 距视口边缘的最小间距（像素），用于 flip/shift 的边界检测，默认 8 */
+    collisionPadding?: number;
 }
 export type TooltipContentProps = PolymorphicProps<"div", BaseTooltipContentProps, false>;
 export {};

package/dist/components/tooltip/TooltipContent/TooltipContent.utils.d.ts

@@ -1,6 +1,57 @@
-export declare function computePosition(trigger: HTMLElement, content: HTMLElement, side: "top" | "bottom" | "left" | "right", align: "start" | "center" | "end", alignOffset: number, sideOffset: number): {
-    top: number;
-    left: number;
-    side: "left" | "right" | "bottom" | "top";
-    align: "center" | "start" | "end";
-};
+import { Middleware, Placement, Side, Alignment } from '../../../lib';
+/**
+ * 把 shadcn/Radix 风格的 side + align 拆分参数，转换成核心库统一用的
+ * `Placement` 字符串（比如 side='top' + align='start' → 'top-start'）。
+ * align 是 'center'（默认对齐、不偏移）时不带后缀，直接是 side 本身。
+ */
+export declare function toPlacement(side: Side, align: Alignment | "center"): Placement;
+/**
+ * 根据最终生效的 placement，算出缩放动画应该以哪个点为锚点（CSS transform-origin）。
+ * 锚点应该落在"贴近 trigger 的那条边"上——比如 placement 是 'top'（content 在
+ * trigger 上方），锚点就该是 content 自己的底边，缩放动画看起来才会像是
+ * "从 trigger 那里长出来"，而不是原地放大缩小（默认的 transform-origin 是
+ * 几何中心 50% 50%，视觉上和"从哪个方向冒出来"没有任何关联）。
+ * 交叉轴（对齐方向）同理：align 是 start 就贴左/上边，end 就贴右/下边。
+ */
+export declare function getTransformOrigin(placement: Placement): string;
+export interface BuildTooltipMiddlewareOptions {
+    sideOffset: number;
+    /** 沿交叉轴（对齐方向）的偏移，对应 offset middleware 的 crossAxis */
+    alignOffset: number;
+    collisionPadding: number;
+    arrowElement: () => Element | undefined;
+}
+/**
+ * Tooltip 定位管线的固定配方：
+ *
+ * 1. offset      — 沿主轴保持 sideOffset 间距，沿交叉轴偏移 alignOffset
+ * 2. flip        — 主轴方向放不下就翻到对面（比如上方没空间就翻到下方）
+ * 3. shift       — 翻转后仍溢出，就在不换边的前提下贴边平移
+ * 4. arrow       — 算出箭头相对 content 的偏移，让它始终指向 trigger 中心
+ * 5. hide        — trigger 被自己的滚动容器完全裁掉时标记隐藏
+ * 6. containingBlockOffset — 修正祖先元素 transform 等属性导致的 position:fixed
+ *    包含块偏移（demo 里通常不出现，放进有大量 transform 的真实项目后才会暴露，
+ *    详见该 middleware 自身的注释）。放在最后一位，因为它修正的是"最终要写进
+ *    DOM 的坐标"，前面几步都在统一的视口坐标系里计算，不受这个偏移影响。
+ *
+ * 特意没有用 size 中间件去动态限制 max-height、允许内容超长时滚动——
+ * tooltip 不应该出现滚动条（这不是本库的一般性限制，是 tooltip 这个组件
+ * 类型本身该有的样子，shadcn/Radix 的 Tooltip 也是这么做的）。宽度上限
+ * 靠 TooltipContent.tsx 里静态的 `max-w-xs` class 兜底，让文字自然换行；
+ * 高度完全不做限制，交给内容自身的实际高度决定。
+ *
+ * 这个决定还有一个技术上的原因：早先的实现里试过用 size 中间件动态算
+ * max-height 配合 overflow:auto 实现"超长内容可滚动"，结果发现内层元素
+ * 一旦同时具备 overflow:auto 和入场动画（zoom-in-95 会给它加一个 transform），
+ * 动画播放期间 transform 会让这个元素变成箭头新的包含块（CSS 规范：非 none
+ * 的 transform 会创建包含块），箭头戳出内层边缘的那部分又会被算进内层的
+ * 可滚动溢出区域——于是出现了"打开瞬间闪一下滚动条，箭头跟着被遮住，
+ * 动画播完滚动条消失、箭头才重新出现"这种诡异现象。去掉滚动能力后，
+ * 这个耦合从根上就不存在了。
+ *
+ * 顺序不能随便换：arrow 必须在 shift/flip 之后（要用最终坐标才能算对偏移），
+ * containingBlockOffset 必须在所有其他 middleware 之后。
+ *
+ * 单独抽成函数是为了让 useTooltipContent 保持简洁，也方便针对这套管线单独测试。
+ */
+export declare function createTooltipMiddleware(options: BuildTooltipMiddlewareOptions): Middleware[];

package/dist/components/tooltip/TooltipContent/TooltipContent.utils.js

@@ -1,64 +1,40 @@
+import { getAlignment as e, getSide as t } from "../../../lib/positioner/core/placement.js";
+import { offset as n } from "../../../lib/positioner/middleware/offset.js";
+import { shift as r } from "../../../lib/positioner/middleware/shift.js";
+import { flip as i } from "../../../lib/positioner/middleware/flip.js";
+import { arrow as a } from "../../../lib/positioner/middleware/arrow.js";
+import { hide as o } from "../../../lib/positioner/middleware/hide.js";
+import { containingBlockOffset as s } from "../../../lib/positioner/middleware/containing-block-offset.js";
 //#region src/components/tooltip/TooltipContent/TooltipContent.utils.ts
-function e(e, t, n, r, i, a) {
-	let o = e.getBoundingClientRect(), s = t.offsetWidth, c = t.offsetHeight, l = window.innerWidth, u = window.innerHeight, d = 0, f = 0, p = n, m = r;
-	switch (n) {
-		case "top":
-			o.top < c + a && o.bottom + a + c <= u && (p = "bottom");
-			break;
-		case "bottom":
-			o.bottom + a + c > u && o.top - a - c >= 0 && (p = "top");
-			break;
-		case "left":
-			o.left < s + a && o.right + a + s <= l && (p = "right");
-			break;
-		case "right":
-			o.right + a + s > l && o.left - a - s >= 0 && (p = "left");
-			break;
-	}
-	switch (p) {
-		case "top":
-			d = o.top - c - a;
-			break;
-		case "bottom":
-			d = o.bottom + a;
-			break;
-		case "left":
-			f = o.left - s - a;
-			break;
-		case "right":
-			f = o.right + a;
-			break;
-	}
-	if (p === "top" || p === "bottom") switch (r) {
-		case "start":
-			f = o.left + i;
-			break;
-		case "center":
-			f = o.left + o.width / 2 - s / 2 + i;
-			break;
-		case "end":
-			f = o.right - s - i;
-			break;
-	}
-	else switch (r) {
-		case "start":
-			d = o.top + i;
-			break;
-		case "center":
-			d = o.top + o.height / 2 - c / 2 + i;
-			break;
-		case "end":
-			d = o.bottom - c - i;
-			break;
+function c(e, t) {
+	return t === "center" ? e : `${e}-${t}`;
+}
+function l(n) {
+	let r = t(n), i = e(n), a = i === "start" ? "0%" : i === "end" ? "100%" : "50%";
+	switch (r) {
+		case "top": return `${a} 100%`;
+		case "bottom": return `${a} 0%`;
+		case "left": return `100% ${a}`;
+		case "right": return `0% ${a}`;
 	}
-	return p === "top" || p === "bottom" ? f < 4 ? (f = 4, m = "start") : f + s > l - 4 && (f = l - s - 4, m = "end") : d < 4 ? (d = 4, m = "start") : d + c > u - 4 && (d = u - c - 4, m = "end"), {
-		top: d,
-		left: f,
-		side: p,
-		align: m
-	};
+}
+function u(e) {
+	return [
+		n({
+			mainAxis: e.sideOffset,
+			crossAxis: e.alignOffset
+		}),
+		i(),
+		r({ padding: e.collisionPadding }),
+		a({
+			element: e.arrowElement,
+			padding: 6
+		}),
+		o(),
+		s()
+	];
 }
 //#endregion
-export { e as computePosition };
+export { u as createTooltipMiddleware, l as getTransformOrigin, c as toPlacement };
 
 //# sourceMappingURL=TooltipContent.utils.js.map

package/dist/components/tooltip/TooltipContent/TooltipContent.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.utils.js","names":[],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.utils.ts"],"sourcesContent":["export function computePosition(\n  trigger: HTMLElement,\n  content: HTMLElement,\n  side: \"top\" | \"bottom\" | \"left\" | \"right\",\n  align: \"start\" | \"center\" | \"end\",\n  alignOffset: number,\n  sideOffset: number,\n) {\n  const rect = trigger.getBoundingClientRect();\n  const contentWidth = content.offsetWidth;\n  const contentHeight = content.offsetHeight;\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n  const MARGIN = 4;\n\n  let top = 0;\n  let left = 0;\n  let resolvedSide = side;\n  let resolvedAlign = align;\n\n  // --- Flip：优先检测对侧是否有足够空间，再决定最终 side ---\n  switch (side) {\n    case \"top\":\n      if (\n        rect.top < contentHeight + sideOffset &&\n        rect.bottom + sideOffset + contentHeight <= vh\n      ) {\n        resolvedSide = \"bottom\";\n      }\n      break;\n    case \"bottom\":\n      if (\n        rect.bottom + sideOffset + contentHeight > vh &&\n        rect.top - sideOffset - contentHeight >= 0\n      ) {\n        resolvedSide = \"top\";\n      }\n      break;\n    case \"left\":\n      if (\n        rect.left < contentWidth + sideOffset &&\n        rect.right + sideOffset + contentWidth <= vw\n      ) {\n        resolvedSide = \"right\";\n      }\n      break;\n    case \"right\":\n      if (\n        rect.right + sideOffset + contentWidth > vw &&\n        rect.left - sideOffset - contentWidth >= 0\n      ) {\n        resolvedSide = \"left\";\n      }\n      break;\n  }\n\n  // --- 主轴位置（基于 resolvedSide）---\n  switch (resolvedSide) {\n    case \"top\":\n      top = rect.top - contentHeight - sideOffset;\n      break;\n    case \"bottom\":\n      top = rect.bottom + sideOffset;\n      break;\n    case \"left\":\n      left = rect.left - contentWidth - sideOffset;\n      break;\n    case \"right\":\n      left = rect.right + sideOffset;\n      break;\n  }\n\n  // --- 交叉轴位置（align）---\n  if (resolvedSide === \"top\" || resolvedSide === \"bottom\") {\n    switch (align) {\n      case \"start\":\n        left = rect.left + alignOffset;\n        break;\n      case \"center\":\n        left = rect.left + rect.width / 2 - contentWidth / 2 + alignOffset;\n        break;\n      case \"end\":\n        left = rect.right - contentWidth - alignOffset;\n        break;\n    }\n  } else {\n    switch (align) {\n      case \"start\":\n        top = rect.top + alignOffset;\n        break;\n      case \"center\":\n        top = rect.top + rect.height / 2 - contentHeight / 2 + alignOffset;\n        break;\n      case \"end\":\n        top = rect.bottom - contentHeight - alignOffset;\n        break;\n    }\n  }\n\n  // --- Shift：贴边平移，并更新 resolvedAlign ---\n  if (resolvedSide === \"top\" || resolvedSide === \"bottom\") {\n    if (left < MARGIN) {\n      left = MARGIN;\n      resolvedAlign = \"start\";\n    } else if (left + contentWidth > vw - MARGIN) {\n      left = vw - contentWidth - MARGIN;\n      resolvedAlign = \"end\";\n    }\n  } else {\n    if (top < MARGIN) {\n      top = MARGIN;\n      resolvedAlign = \"start\";\n    } else if (top + contentHeight > vh - MARGIN) {\n      top = vh - contentHeight - MARGIN;\n      resolvedAlign = \"end\";\n    }\n  }\n\n  return { top, left, side: resolvedSide, align: resolvedAlign };\n}\n"],"mappings":";AAAA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA,GACA;CACA,IAAM,IAAO,EAAQ,uBAAuB,EACtC,IAAe,EAAQ,aACvB,IAAgB,EAAQ,cACxB,IAAK,OAAO,YACZ,IAAK,OAAO,aAGd,IAAM,GACN,IAAO,GACP,IAAe,GACf,IAAgB;AAGpB,SAAQ,GAAR;EACE,KAAK;AACH,GACE,EAAK,MAAM,IAAgB,KAC3B,EAAK,SAAS,IAAa,KAAiB,MAE5C,IAAe;AAEjB;EACF,KAAK;AACH,GACE,EAAK,SAAS,IAAa,IAAgB,KAC3C,EAAK,MAAM,IAAa,KAAiB,MAEzC,IAAe;AAEjB;EACF,KAAK;AACH,GACE,EAAK,OAAO,IAAe,KAC3B,EAAK,QAAQ,IAAa,KAAgB,MAE1C,IAAe;AAEjB;EACF,KAAK;AACH,GACE,EAAK,QAAQ,IAAa,IAAe,KACzC,EAAK,OAAO,IAAa,KAAgB,MAEzC,IAAe;AAEjB;;AAIJ,SAAQ,GAAR;EACE,KAAK;AACH,OAAM,EAAK,MAAM,IAAgB;AACjC;EACF,KAAK;AACH,OAAM,EAAK,SAAS;AACpB;EACF,KAAK;AACH,OAAO,EAAK,OAAO,IAAe;AAClC;EACF,KAAK;AACH,OAAO,EAAK,QAAQ;AACpB;;AAIJ,KAAI,MAAiB,SAAS,MAAiB,SAC7C,SAAQ,GAAR;EACE,KAAK;AACH,OAAO,EAAK,OAAO;AACnB;EACF,KAAK;AACH,OAAO,EAAK,OAAO,EAAK,QAAQ,IAAI,IAAe,IAAI;AACvD;EACF,KAAK;AACH,OAAO,EAAK,QAAQ,IAAe;AACnC;;KAGJ,SAAQ,GAAR;EACE,KAAK;AACH,OAAM,EAAK,MAAM;AACjB;EACF,KAAK;AACH,OAAM,EAAK,MAAM,EAAK,SAAS,IAAI,IAAgB,IAAI;AACvD;EACF,KAAK;AACH,OAAM,EAAK,SAAS,IAAgB;AACpC;;AAuBN,QAlBI,MAAiB,SAAS,MAAiB,WACzC,IAAO,KACT,IAAO,GACP,IAAgB,WACP,IAAO,IAAe,IAAK,MACpC,IAAO,IAAK,IAAe,GAC3B,IAAgB,SAGd,IAAM,KACR,IAAM,GACN,IAAgB,WACP,IAAM,IAAgB,IAAK,MACpC,IAAM,IAAK,IAAgB,GAC3B,IAAgB,QAIb;EAAE;EAAK;EAAM,MAAM;EAAc,OAAO;EAAe"}
+{"version":3,"file":"TooltipContent.utils.js","names":[],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.utils.ts"],"sourcesContent":["import {\n  offset,\n  flip,\n  shift,\n  arrow,\n  hide,\n  containingBlockOffset,\n  getSide,\n  getAlignment,\n  type Middleware,\n  type Placement,\n  type Side,\n  type Alignment,\n} from \"~/lib\";\n\n/**\n * 把 shadcn/Radix 风格的 side + align 拆分参数，转换成核心库统一用的\n * `Placement` 字符串（比如 side='top' + align='start' → 'top-start'）。\n * align 是 'center'（默认对齐、不偏移）时不带后缀，直接是 side 本身。\n */\nexport function toPlacement(\n  side: Side,\n  align: Alignment | \"center\",\n): Placement {\n  return align === \"center\" ? side : (`${side}-${align}` as Placement);\n}\n\n/**\n * 根据最终生效的 placement，算出缩放动画应该以哪个点为锚点（CSS transform-origin）。\n * 锚点应该落在\"贴近 trigger 的那条边\"上——比如 placement 是 'top'（content 在\n * trigger 上方），锚点就该是 content 自己的底边，缩放动画看起来才会像是\n * \"从 trigger 那里长出来\"，而不是原地放大缩小（默认的 transform-origin 是\n * 几何中心 50% 50%，视觉上和\"从哪个方向冒出来\"没有任何关联）。\n * 交叉轴（对齐方向）同理：align 是 start 就贴左/上边，end 就贴右/下边。\n */\nexport function getTransformOrigin(placement: Placement): string {\n  const side = getSide(placement);\n  const align = getAlignment(placement);\n  const crossAxisOrigin =\n    align === \"start\" ? \"0%\" : align === \"end\" ? \"100%\" : \"50%\";\n\n  switch (side) {\n    case \"top\":\n      return `${crossAxisOrigin} 100%`;\n    case \"bottom\":\n      return `${crossAxisOrigin} 0%`;\n    case \"left\":\n      return `100% ${crossAxisOrigin}`;\n    case \"right\":\n      return `0% ${crossAxisOrigin}`;\n  }\n}\n\nexport interface BuildTooltipMiddlewareOptions {\n  sideOffset: number;\n  /** 沿交叉轴（对齐方向）的偏移，对应 offset middleware 的 crossAxis */\n  alignOffset: number;\n  collisionPadding: number;\n  arrowElement: () => Element | undefined;\n}\n\n/**\n * Tooltip 定位管线的固定配方：\n *\n * 1. offset      — 沿主轴保持 sideOffset 间距，沿交叉轴偏移 alignOffset\n * 2. flip        — 主轴方向放不下就翻到对面（比如上方没空间就翻到下方）\n * 3. shift       — 翻转后仍溢出，就在不换边的前提下贴边平移\n * 4. arrow       — 算出箭头相对 content 的偏移，让它始终指向 trigger 中心\n * 5. hide        — trigger 被自己的滚动容器完全裁掉时标记隐藏\n * 6. containingBlockOffset — 修正祖先元素 transform 等属性导致的 position:fixed\n *    包含块偏移（demo 里通常不出现，放进有大量 transform 的真实项目后才会暴露，\n *    详见该 middleware 自身的注释）。放在最后一位，因为它修正的是\"最终要写进\n *    DOM 的坐标\"，前面几步都在统一的视口坐标系里计算，不受这个偏移影响。\n *\n * 特意没有用 size 中间件去动态限制 max-height、允许内容超长时滚动——\n * tooltip 不应该出现滚动条（这不是本库的一般性限制，是 tooltip 这个组件\n * 类型本身该有的样子，shadcn/Radix 的 Tooltip 也是这么做的）。宽度上限\n * 靠 TooltipContent.tsx 里静态的 `max-w-xs` class 兜底，让文字自然换行；\n * 高度完全不做限制，交给内容自身的实际高度决定。\n *\n * 这个决定还有一个技术上的原因：早先的实现里试过用 size 中间件动态算\n * max-height 配合 overflow:auto 实现\"超长内容可滚动\"，结果发现内层元素\n * 一旦同时具备 overflow:auto 和入场动画（zoom-in-95 会给它加一个 transform），\n * 动画播放期间 transform 会让这个元素变成箭头新的包含块（CSS 规范：非 none\n * 的 transform 会创建包含块），箭头戳出内层边缘的那部分又会被算进内层的\n * 可滚动溢出区域——于是出现了\"打开瞬间闪一下滚动条，箭头跟着被遮住，\n * 动画播完滚动条消失、箭头才重新出现\"这种诡异现象。去掉滚动能力后，\n * 这个耦合从根上就不存在了。\n *\n * 顺序不能随便换：arrow 必须在 shift/flip 之后（要用最终坐标才能算对偏移），\n * containingBlockOffset 必须在所有其他 middleware 之后。\n *\n * 单独抽成函数是为了让 useTooltipContent 保持简洁，也方便针对这套管线单独测试。\n */\nexport function createTooltipMiddleware(\n  options: BuildTooltipMiddlewareOptions,\n): Middleware[] {\n  return [\n    offset({ mainAxis: options.sideOffset, crossAxis: options.alignOffset }),\n    flip(),\n    shift({ padding: options.collisionPadding }),\n    arrow({ element: options.arrowElement, padding: 6 }),\n    hide(),\n    containingBlockOffset(),\n  ];\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EACd,GACA,GACW;CACX,OAAO,MAAU,WAAW,IAAQ,GAAG,EAAK,GAAG;AACjD;AAUA,SAAgB,EAAmB,GAA8B;CAC/D,IAAM,IAAO,EAAQ,CAAS,GACxB,IAAQ,EAAa,CAAS,GAC9B,IACJ,MAAU,UAAU,OAAO,MAAU,QAAQ,SAAS;CAExD,QAAQ,GAAR;EACE,KAAK,OACH,OAAO,GAAG,EAAgB;EAC5B,KAAK,UACH,OAAO,GAAG,EAAgB;EAC5B,KAAK,QACH,OAAO,QAAQ;EACjB,KAAK,SACH,OAAO,MAAM;CACjB;AACF;AA2CA,SAAgB,EACd,GACc;CACd,OAAO;EACL,EAAO;GAAE,UAAU,EAAQ;GAAY,WAAW,EAAQ;EAAY,CAAC;EACvE,EAAK;EACL,EAAM,EAAE,SAAS,EAAQ,iBAAiB,CAAC;EAC3C,EAAM;GAAE,SAAS,EAAQ;GAAc,SAAS;EAAE,CAAC;EACnD,EAAK;EACL,EAAsB;CACxB;AACF"}

package/dist/components/tooltip/TooltipContent/index.d.ts

@@ -1 +1,8 @@
 export { TooltipContent } from './TooltipContent';
+export { TooltipContentContext, useTooltipContentContext, } from './TooltipContent.context';
+export type { TooltipContentContextValue } from './TooltipContent.context';
+export type { TooltipContentProps } from './TooltipContent.types';
+export { createTooltipMiddleware, getTransformOrigin, toPlacement, } from './TooltipContent.utils';
+export type { BuildTooltipMiddlewareOptions } from './TooltipContent.utils';
+export { useTooltipContent } from './useTooltipContent';
+export type { UseTooltipContentResult } from './useTooltipContent';

package/dist/components/tooltip/TooltipContent/useTooltipContent.d.ts

@@ -1,10 +1,47 @@
+import { Positioner } from '../../../lib';
+import { useTooltipContext } from '../Tooltip/Tooltip.context';
 import { TooltipContentProps } from './TooltipContent.types';
-export declare const useTooltipContent: (ref: () => HTMLDivElement | undefined, local: () => Required<Pick<TooltipContentProps, "side" | "align" | "alignOffset" | "sideOffset">>) => {
-    shouldRender: import('solid-js').Accessor<boolean>;
-    position: {
-        top: number;
-        left: number;
-        side: "left" | "right" | "bottom" | "top";
-        align: "center" | "start" | "end";
+export interface UseTooltipContentResult {
+    ctx: ReturnType<typeof useTooltipContext>;
+    pos: Positioner;
+    /** 综合了 open 状态 + hide 中间件的 referenceHidden 判断，代表"逻辑上应不应该打开" */
+    isVisible: () => boolean;
+    /**
+     * 代表"DOM 里要不要还留着这个节点"。isVisible 变 false 之后，mounted 不会立刻
+     * 跟着变 false，而是等退场动画播完（或者兜底超时）才变——展示层应该用它来控制
+     * <Show>，而不是直接用 isVisible，否则退场动画根本来不及播放就被卸载了。
+     */
+    mounted: () => boolean;
+    /**
+     * 真正用来驱动 data-state（进而驱动 CSS 进出场动画 class）的状态，
+     * 展示层应该用它，而不是直接用 isVisible。
+     *
+     * 和 isVisible 的区别只在"打开"这一侧：isVisible 变 true 的瞬间，
+     * animationState 不会立刻跟着变 "open"，而是等一帧（requestAnimationFrame）
+     * 之后才变——这一帧的间隙用来让箭头（TooltipArrow）完成挂载、把自己注册给
+     * arrow middleware、拿到正确的位置偏移。如果不等这一帧，动画会在箭头位置
+     * 还没算对的时候就开始播放，播到一半箭头才"跳"到正确位置，看起来就像是
+     * 箭头比内容慢一拍——这正是因为内容的淡入/缩放靠的是 CSS 动画（父元素的
+     * opacity/transform 会连带影响所有子元素，包括箭头，两者本该同步），而箭头
+     * 的具体位置靠的是 JS 算出来的 left/top，这是两套完全独立的机制，只有当
+     * "开始播放动画"这个时间点晚于"箭头位置算完"，才能保证两者观感一致。
+     * 关闭这一侧不需要这个延迟，isVisible 变 false 时 animationState 立刻跟着变。
+     */
+    animationState: () => "open" | "closed";
+    arrowElement: () => Element | undefined;
+    setArrowElement: (el: Element) => void;
+    /** 内层内容元素（真正播放进出场动画的那一层），TooltipContent 需要把它 ref 进来 */
+    contentElement: () => HTMLElement | undefined;
+    setContentElement: (el: HTMLElement) => void;
+    /**
+     * 加在"滑动层"（定位层和内容层之间的中间那层）上的 style。
+     * 命中 TooltipGroup 抢占时会有一个非零初始偏移，下一帧起会用 CSS transition
+     * 平滑归零，从而制造出"从旧 tooltip 位置滑到新位置"的效果；平时是空对象，
+     * 不产生任何影响。
+     */
+    slideStyle: () => {
+        transform?: string;
+        transition?: string;
     };
-};
+}
+export declare function useTooltipContent(props: () => TooltipContentProps): UseTooltipContentResult;

package/dist/components/tooltip/TooltipContent/useTooltipContent.js

@@ -1,48 +1,77 @@
 import { useTooltipContext as e } from "../Tooltip/Tooltip.context.js";
-import { computePosition as t } from "./TooltipContent.utils.js";
-import { createEffect as n, createSignal as r, onCleanup as i, onMount as a, untrack as o } from "solid-js";
-import { createStore as s } from "solid-js/store";
+import { createPositioner as t } from "../../../lib/positioner/create-positioner.js";
+import { createTooltipMiddleware as n, toPlacement as r } from "./TooltipContent.utils.js";
+import { createEffect as i, createMemo as a, createSignal as o, onCleanup as s } from "solid-js";
 //#region src/components/tooltip/TooltipContent/useTooltipContent.ts
-var c = (c, l) => {
-	let u = e(), [d, f] = s({
-		top: 0,
-		left: 0,
-		side: o(() => l().side),
-		align: o(() => l().align)
-	}), [p, m] = r(o(u.open)), h = (e) => {
-		if (!u.triggerRef || !e) return;
-		let { top: n, left: r, side: i, align: a } = t(u.triggerRef, e, l().side, l().align, l().alignOffset, l().sideOffset);
-		f({
-			top: n,
-			left: r,
-			side: i,
-			align: a
-		});
-	}, g = () => h(c());
-	return a(() => {
-		window.addEventListener("scroll", g, { passive: !0 }), window.addEventListener("resize", g, { passive: !0 });
-	}), i(() => {
-		window.removeEventListener("scroll", g), window.removeEventListener("resize", g);
-	}), n(() => {
-		if (u.open()) {
-			m(!0), requestAnimationFrame(() => {
-				requestAnimationFrame(() => h(c()));
-			});
-			return;
+var c = 300;
+function l(l) {
+	let u = e("TooltipContent"), [d, f] = o(), [p, m] = o(), h = t(u.reference, u.floating, {
+		placement: () => r(l().side ?? "top", l().align ?? "center"),
+		strategy: "fixed",
+		middleware: () => n({
+			sideOffset: l().sideOffset ?? 8,
+			alignOffset: l().alignOffset ?? 0,
+			collisionPadding: l().collisionPadding ?? 8,
+			arrowElement: d
+		})
+	}), g = a(() => u.open() && !h.middlewareData().hide?.referenceHidden), [_, v] = o("closed");
+	i(() => {
+		if (g()) {
+			let e = requestAnimationFrame(() => v("open"));
+			s(() => cancelAnimationFrame(e));
+		} else v("closed");
+	});
+	let [y, b] = o();
+	i(() => {
+		if (!S()) return;
+		let e = u.pendingSlideFrom();
+		if (!e || !h.isPositioned()) return;
+		let t = e.x - h.x(), n = e.y - h.y();
+		b({
+			x: t,
+			y: n
+		}), u.clearPendingSlideFrom(), requestAnimationFrame(() => b({
+			x: 0,
+			y: 0
+		}));
+	});
+	let x = a(() => {
+		let e = y();
+		if (!e) return {};
+		let t = e.x === 0 && e.y === 0;
+		return {
+			transform: `translate(${e.x}px, ${e.y}px)`,
+			transition: t ? "transform 150ms ease" : void 0
+		};
+	}), [S, C] = o(g());
+	return i((e) => {
+		let t = g(), n = p();
+		if (t) C(!0);
+		else if (e && n) if (u.consumeSuppressExitAnimation()) C(!1);
+		else {
+			let e = (e) => {
+				e.target === n && C(!1);
+			};
+			n.addEventListener("animationend", e), s(() => n.removeEventListener("animationend", e));
+			let t = window.setTimeout(() => C(!1), c);
+			s(() => window.clearTimeout(t));
 		}
-		let e = c();
-		if (!e) {
-			m(!1);
-			return;
-		}
-		let t = () => m(!1);
-		e.addEventListener("animationend", t, { once: !0 }), e.addEventListener("transitionend", t, { once: !0 });
-	}), {
-		shouldRender: p,
-		position: d
+		else t || C(!1);
+		return t;
+	}, g()), {
+		ctx: u,
+		pos: h,
+		isVisible: g,
+		mounted: S,
+		animationState: _,
+		arrowElement: d,
+		setArrowElement: f,
+		contentElement: p,
+		setContentElement: m,
+		slideStyle: x
 	};
-};
+}
 //#endregion
-export { c as useTooltipContent };
+export { l as useTooltipContent };
 
 //# sourceMappingURL=useTooltipContent.js.map