@neut/ui 0.0.12 → 0.0.14

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.js","names":["mergeProps","onCleanup","onMount","splitProps","JSX","clsx","toggleVariants","callEventHandler","useToggleGroupContext","ToggleGroupValue","toggleGroupItemVariants","ToggleGroupItemProps","ToggleGroupItem","props","TValue","Element","ctx","merged","type","const","local","rest","elementRef","HTMLButtonElement","variant","size","pressed","isPressed","value","disabled","tabIndex","highlighted","highlightedValue","isUsable","undefined","isFirstEnabled","registerItem","element","_el$","_tmpl$","addEventListener","e","setHighlightedValue","onFocus","$$click","onClick","defaultPrevented","toggleItem","currentTarget","_$use","el","_$spread","_$mergeProps","tabindex","data-variant","data-size","data-spacing","spacing","data-pressed","data-disabled","data-state","aria-pressed","class","classList","_$insert","children","_$delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { mergeProps, onCleanup, onMount, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupValue } from \"../ToggleGroup/ToggleGroup.types\";\nimport { toggleGroupItemVariants } from \"./ToggleGroupItem.styles\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\n/**\n * ToggleGroupItem:ToggleGroup 内的两态按钮。\n *\n * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更\n * - disabled 继承整组状态,可在 item 上单独禁用\n * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点\n */\nexport function ToggleGroupItem<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupItemProps<TValue>): JSX.Element {\n  // context 用宽值类型读取:item 无法从父级推导 group 的值类型,\n  // 自己的 TValue 始终可以传给宽类型参数\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"disabled\",\n    \"type\",\n    \"onClick\",\n    \"onFocus\",\n    \"children\",\n  ]);\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // 组级未显式指定 variant/size 时,item 可单独覆盖\n  const variant = () => ctx.variant() ?? local.variant ?? \"default\";\n  const size = () => ctx.size() ?? local.size ?? \"default\";\n  const pressed = () => ctx.isPressed(local.value);\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  // roving tabindex:高亮 item 持 0;高亮缺失或指向不可用 item(disabled/卸载)时,\n  // 首个可用 item 持 0 作为键盘起点,避免整组键盘不可达\n  const tabIndex = () => {\n    if (disabled()) return -1;\n    const highlighted = ctx.highlightedValue();\n    if (highlighted === local.value && ctx.isUsable(local.value)) return 0;\n    if (\n      (highlighted === undefined || !ctx.isUsable(highlighted)) &&\n      ctx.isFirstEnabled(local.value)\n    ) {\n      return 0;\n    }\n    return -1;\n  };\n\n  onMount(() => {\n    onCleanup(\n      ctx.registerItem({\n        value: local.value,\n        disabled,\n        element: elementRef!,\n      }),\n    );\n  });\n\n  return (\n    <button\n      ref={(el) => {\n        elementRef = el;\n      }}\n      type={local.type}\n      disabled={disabled()}\n      tabindex={tabIndex()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      data-pressed={pressed() ? \"\" : null}\n      data-disabled={disabled() ? \"\" : null}\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({ variant: variant(), size: size() }),\n        toggleGroupItemVariants(),\n        local.class,\n      )}\n      classList={local.classList}\n      onClick={(e) => {\n        // 用户回调优先,可用 preventDefault() 阻止本次选中\n        callEventHandler(local.onClick, e);\n        if (!e.defaultPrevented && !disabled()) {\n          ctx.toggleItem(local.value, e, e.currentTarget);\n        }\n      }}\n      onFocus={(e) => {\n        // 聚焦更新高亮(roving focus 起点)\n        if (!disabled()) ctx.setHighlightedValue(local.value);\n        callEventHandler(local.onFocus, e);\n      }}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgBY,EAEdC,GAAkD;CAGlD,IAAMG,IAAMR,EAAsB,iBAAiB,GAC7CS,IAASjB,EAAW,EAAEkB,MAAM,SAAkB,GAAGL,CAAK,GAEtD,CAACO,GAAOC,KAAQlB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEGK,GAGEE,UAAgBR,EAAIQ,QAAQ,KAAKJ,EAAMI,WAAW,WAClDC,UAAaT,EAAIS,KAAK,KAAKL,EAAMK,QAAQ,WACzCC,UAAgBV,EAAIW,UAAUP,EAAMQ,KAAK,GACzCC,UAAiBb,EAAIa,SAAS,KAAK,CAAC,CAACT,EAAMS,UAI3CC,UAAiB;EACrB,IAAID,EAAS,GAAG,OAAO;EACvB,IAAME,IAAcf,EAAIgB,iBAAiB;EAQzC,OAPID,MAAgBX,EAAMQ,SAASZ,EAAIiB,SAASb,EAAMQ,KAAK,MAExDG,MAAgBG,KAAAA,KAAa,CAAClB,EAAIiB,SAASF,CAAW,MACvDf,EAAImB,eAAef,EAAMQ,KAAK,IAEvB,IAEF;CACT;CAYA,OAVA1B,QAAc;EACZD,EACEe,EAAIoB,aAAa;GACfR,OAAOR,EAAMQ;GACbC;GACAQ,SAASf;EACX,CAAC,CACH;CACF,CAAC,UAED;EAAA,IAAAgB,IAAAC,EAAA;EAoCmB,OApCnBD,EAAAE,iBAAA,UA6BcC,MAAM;GAGdlC,AADKsB,EAAS,KAAGb,EAAI0B,oBAAoBtB,EAAMQ,KAAK,GACpDrB,EAAiBa,EAAMuB,SAASF,CAAC;EACnC,CAAC,GAAAH,EAAAM,WAXSH,MAAM;GAGd,AADAlC,EAAiBa,EAAMyB,SAASJ,CAAC,GAC7B,CAACA,EAAEK,oBAAoB,CAACjB,EAAS,KACnCb,EAAI+B,WAAW3B,EAAMQ,OAAOa,GAAGA,EAAEO,aAAa;EAElD,GAACC,GA1BKC,MAAO;GACX5B,IAAa4B;EACf,GAACZ,CAAA,GAAAa,EAAAb,GAAAc,EAAA;GAAA,IACDlC,OAAI;IAAA,OAAEE,EAAMF;GAAI;GAAA,IAChBW,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IACpBwB,WAAQ;IAAA,OAAEvB,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENN,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHT,EAAIyC,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb/B,EAAQ,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OACpBG,EAAS,IAAI,KAAK;GAAI;GAAA,IAAA,eAAA;IAAA,OACzBH,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAA,QAAA;IAAA,OAChBrB,EACLC,EAAe;KAAEkB,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDf,EAAwB,GACxBU,EAAM0C,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAE3C,EAAM2C;GAAS;EAAA,GAatB1C,CAAI,GAAA,IAAA,EAAA,GAAA2C,EAAA1B,SAEPlB,EAAM6C,QAAQ,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,OAAA,CAAA"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ToggleGroupItem 位于 ToggleGroup 内时需要的“拼接态”样式。
+ *
+ * 依赖根元素上的钩子:
+ * - `group-data-[spacing=0]/toggle-group`:spacing 为 0 时相邻 item 拼接为整体
+ * - `data-[spacing=0]`:item 自身的 data-spacing(shadcn 同样在 item 上输出)
+ * - `group-data-horizontal|vertical/toggle-group`:按方向决定首尾圆角/边框
+ * - `data-[variant=outline]`:outline 拼接时只保留内侧边框
+ *
+ * variant / size 的基础样式仍由 `toggleVariants` 提供,这里只补“组合关系”。
+ */
+export declare const toggleGroupItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.js

@@ -0,0 +1,7 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.ts
+var t = e("shrink-0 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t");
+//#endregion
+export { t as toggleGroupItemVariants };
+
+//# sourceMappingURL=ToggleGroupItem.styles.js.map

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.styles.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * ToggleGroupItem 位于 ToggleGroup 内时需要的“拼接态”样式。\n *\n * 依赖根元素上的钩子:\n * - `group-data-[spacing=0]/toggle-group`:spacing 为 0 时相邻 item 拼接为整体\n * - `data-[spacing=0]`:item 自身的 data-spacing(shadcn 同样在 item 上输出)\n * - `group-data-horizontal|vertical/toggle-group`:按方向决定首尾圆角/边框\n * - `data-[variant=outline]`:outline 拼接时只保留内侧边框\n *\n * variant / size 的基础样式仍由 `toggleVariants` 提供,这里只补“组合关系”。\n */\nexport const toggleGroupItemVariants = cva(\n  \"shrink-0 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n);\n"],"mappings":";;AAaA,IAAa,IAA0B,EACrC,k4BACF"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.types.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'solid-js';
+import { toggleVariants } from '../../toggle/Toggle/Toggle.styles';
+import { HTMLAttributes, PolymorphicProps } from '../../../types';
+import { ToggleGroupValue } from '../ToggleGroup/ToggleGroup.types';
+type BaseToggleGroupItemProps<TValue extends ToggleGroupValue> = VariantProps<typeof toggleVariants> & HTMLAttributes<"button"> & {
+    /** 当前 item 的唯一值,类型由泛型参数决定(与所属 ToggleGroup 保持一致) */
+    value: TValue;
+    /** 组件内部会先处理选中,再调用用户回调(与 tabs 的 trigger 一致) */
+    onClick?: ComponentProps<"button">["onClick"];
+    /** 聚焦即更新 roving focus 高亮,用户回调会被一并调用 */
+    onFocus?: ComponentProps<"button">["onFocus"];
+};
+/**
+ * 泛型参数约束 `value` 的类型(默认 `string | number`)。
+ * 子组件无法从父级 `ToggleGroup` 推导类型,因此这里由 `value` 自身推导,
+ * 或显式指定:`<ToggleGroupItem<"bold" | "italic"> value="bold" />`。
+ */
+export type ToggleGroupItemProps<TValue extends ToggleGroupValue = ToggleGroupValue> = PolymorphicProps<"button", BaseToggleGroupItemProps<TValue>, false>;
+export {};

package/dist/components/toggle-group/ToggleGroupItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleGroupItem } from './ToggleGroupItem';
+export type { ToggleGroupItemProps } from './ToggleGroupItem.types';

package/dist/components/toggle-group/call-event-handler.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 调用用户传入的事件处理器(兼容 Solid 的函数 / 函数数组 / bound 对象形式)。
+ * splitProps 提取出的事件类型是 EventHandlerUnion,不能直接调用。
+ */
+export declare function callEventHandler<E extends Event>(handler: unknown, event: E): void;

package/dist/components/toggle-group/call-event-handler.js

@@ -0,0 +1,9 @@
+//#region src/components/toggle-group/call-event-handler.ts
+function e(e, t) {
+	let n = Array.isArray(e) ? e : [e];
+	for (let e of n) typeof e == "function" && e(t);
+}
+//#endregion
+export { e as callEventHandler };
+
+//# sourceMappingURL=call-event-handler.js.map

package/dist/components/toggle-group/call-event-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-event-handler.js","names":[],"sources":["../../../src/components/toggle-group/call-event-handler.ts"],"sourcesContent":["/**\n * 调用用户传入的事件处理器(兼容 Solid 的函数 / 函数数组 / bound 对象形式)。\n * splitProps 提取出的事件类型是 EventHandlerUnion,不能直接调用。\n */\nexport function callEventHandler<E extends Event>(\n  handler: unknown,\n  event: E,\n): void {\n  const list = Array.isArray(handler) ? handler : [handler];\n  for (const h of list) {\n    if (typeof h === \"function\") (h as (e: E) => void)(event);\n  }\n}\n"],"mappings":";AAIA,SAAgB,EACd,GACA,GACM;CACN,IAAM,IAAO,MAAM,QAAQ,CAAO,IAAI,IAAU,CAAC,CAAO;CACxD,KAAK,IAAM,KAAK,GACd,AAAI,OAAO,KAAM,cAAY,EAAsB,CAAK;AAE5D"}

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,4 @@
+export { ToggleGroup } from './ToggleGroup';
+export type { ToggleGroupProps, ToggleGroupValue, ToggleGroupContextValue, ToggleGroupItemEntry, ToggleGroupOrientation, ToggleGroupVariant, ToggleGroupSize, ToggleGroupChangeEventDetails, ToggleGroupChangeEventReason, } from './ToggleGroup';
+export { ToggleGroupItem } from './ToggleGroupItem';
+export type { ToggleGroupItemProps } from './ToggleGroupItem';

package/dist/components/toggle-group/index.js

@@ -0,0 +1,3 @@
+import { ToggleGroup as e } from "./ToggleGroup/ToggleGroup.js";
+import { ToggleGroupItem as t } from "./ToggleGroupItem/ToggleGroupItem.js";
+export { e as ToggleGroup, t as ToggleGroupItem };

package/dist/components/tooltip/Tooltip/Tooltip.js

@@ -1,70 +1,71 @@
-import { TooltipContext as e } from "./Tooltip.context.js";
-import { useTooltipGroupContext as t } from "../TooltipGroup/TooltipGroup.context.js";
-import { createComponent as n } from "solid-js/web";
-import { createEffect as r, createMemo as i, createSignal as a, createUniqueId as o, onCleanup as s } from "solid-js";
+import { useTooltipProviderContext as e } from "../TooltipProvider/TooltipProvider.context.js";
+import { TooltipContext as t } from "./Tooltip.context.js";
+import { useTooltipGroupContext as n } from "../TooltipGroup/TooltipGroup.context.js";
+import { createComponent as r } from "solid-js/web";
+import { createEffect as i, createMemo as a, createSignal as o, createUniqueId as s, onCleanup as c } from "solid-js";
 //#region src/components/tooltip/Tooltip/Tooltip.tsx
-var c = 300, l = 150;
-function u(u) {
-	let d = t(), [f, p] = a(u.defaultOpen ?? !1), m = i(() => u.open === void 0 ? f() : u.open), h = i(() => !!u.disabled), [g, _] = a(), [v, y] = a(), [b, x] = a(), [S, C] = a(!1), w = (e) => {
-		u.open === void 0 && p(e), u.onOpenChange?.(e);
-	}, T, E, D = () => {
-		T !== void 0 && (window.clearTimeout(T), T = void 0), E !== void 0 && (window.clearTimeout(E), E = void 0);
-	}, O = () => {
-		if (D(), h() || m()) return;
-		let e = d?.claim();
+var l = 0, u = 150;
+function d(d) {
+	let f = n(), p = e(), [m, h] = o(d.defaultOpen ?? !1), g = a(() => d.open === void 0 ? m() : d.open), _ = a(() => !!d.disabled), [v, y] = o(), [b, x] = o(), [S, C] = o(), [w, T] = o(!1), E = (e) => {
+		d.open === void 0 && h(e), d.onOpenChange?.(e);
+	}, D, O, k = () => {
+		D !== void 0 && (window.clearTimeout(D), D = void 0), O !== void 0 && (window.clearTimeout(O), O = void 0);
+	}, A = () => {
+		if (k(), _() || g()) return;
+		let e = f?.claim();
 		if (e) {
-			x(e), w(!0);
+			C(e), E(!0);
 			return;
 		}
-		T = window.setTimeout(() => w(!0), u.openDelay ?? c);
-	}, k = () => {
-		D(), E = window.setTimeout(() => w(!1), u.closeDelay ?? l);
-	}, A = () => {
-		h() || (D(), w(!0));
+		D = window.setTimeout(() => E(!0), d.openDelay ?? p?.delay() ?? l);
 	}, j = () => {
-		D(), w(!1);
+		k(), O = window.setTimeout(() => E(!1), d.closeDelay ?? p?.closeDelay() ?? u);
 	}, M = () => {
-		C(!0), D(), w(!1);
+		_() || (k(), E(!0));
 	}, N = () => {
-		E !== void 0 && (window.clearTimeout(E), E = void 0);
+		k(), E(!1);
+	}, P = () => {
+		T(!0), k(), E(!1);
+	}, F = () => {
+		O !== void 0 && (window.clearTimeout(O), O = void 0);
 	};
-	s(D), r(() => {
-		if (!d || !m()) return;
-		let e = d.registerActive({
-			rect: () => v()?.getBoundingClientRect(),
-			forceClose: M
+	c(k), i(() => {
+		if (!f || !g()) return;
+		let e = f.registerActive({
+			rect: () => b()?.getBoundingClientRect(),
+			forceClose: P
 		});
-		s(e);
+		c(e);
 	});
-	let P = {
-		open: m,
-		disabled: h,
-		contentId: `tooltip-${o()}`,
-		reference: g,
-		setReference: _,
-		floating: v,
-		setFloating: y,
-		requestOpen: O,
-		requestClose: k,
-		openImmediate: A,
-		closeImmediate: j,
-		keepOpen: N,
-		pendingSlideFrom: b,
-		clearPendingSlideFrom: () => x(void 0),
-		suppressExitAnimation: S,
+	let I = {
+		open: g,
+		disabled: _,
+		contentId: `tooltip-${s()}`,
+		reference: v,
+		setReference: y,
+		floating: b,
+		setFloating: x,
+		requestOpen: A,
+		requestClose: j,
+		openImmediate: M,
+		closeImmediate: N,
+		keepOpen: F,
+		pendingSlideFrom: S,
+		clearPendingSlideFrom: () => C(void 0),
+		suppressExitAnimation: w,
 		consumeSuppressExitAnimation: () => {
-			let e = S();
-			return e && C(!1), e;
+			let e = w();
+			return e && T(!1), e;
 		}
 	};
-	return n(e.Provider, {
-		value: P,
+	return r(t.Provider, {
+		value: I,
 		get children() {
-			return u.children;
+			return d.children;
 		}
 	});
 }
 //#endregion
-export { u as Tooltip };
+export { d as Tooltip };
 
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["createSignal","createMemo","createUniqueId","createEffect","onCleanup","JSX","TooltipContext","useTooltipGroupContext","TooltipContextValue","TooltipProps","Rect","DEFAULT_OPEN_DELAY","DEFAULT_CLOSE_DELAY","Tooltip","props","Element","group","internalOpen","setInternalOpen","defaultOpen","open","undefined","disabled","reference","setReference","floating","setFloating","HTMLElement","pendingSlideFrom","setPendingSlideFrom","suppressExitAnimation","setSuppressExitAnimation","commit","next","onOpenChange","openTimer","closeTimer","clearTimers","window","clearTimeout","requestOpen","claimedRect","claim","setTimeout","openDelay","requestClose","closeDelay","openImmediate","closeImmediate","forceCloseForGroup","keepOpen","unregister","registerActive","rect","getBoundingClientRect","forceClose","contentId","ctx","clearPendingSlideFrom","consumeSuppressExitAnimation","value","_$createComponent","Provider","children"],"sources":["../../../../src/components/tooltip/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  createSignal,\n  createMemo,\n  createUniqueId,\n  createEffect,\n  onCleanup,\n  type JSX,\n} from \"solid-js\";\nimport { TooltipContext } from \"./Tooltip.context\";\nimport { useTooltipGroupContext } from \"../TooltipGroup/TooltipGroup.context\";\nimport type { TooltipContextValue, TooltipProps } from \"./Tooltip.types\";\nimport type { Rect } from \"~/lib\";\n\nconst DEFAULT_OPEN_DELAY = 300;\nconst DEFAULT_CLOSE_DELAY = 150;\n\n/**\n * Tooltip 根组件：不渲染任何 DOM，只负责状态管理 + 提供 context。\n * 真正的展示交给 <TooltipTrigger>/<TooltipContent>/<TooltipArrow>。\n *\n * 如果外面包了 <TooltipGroup>，组内相邻 trigger 之间切换 hover 会跳过\n * openDelay，并触发\"从旧位置滑到新位置\"的过渡（细节见 TooltipGroup.context.ts）。\n *\n * @example\n * ```tsx\n * <Tooltip openDelay={300}>\n *   <TooltipTrigger>悬停我</TooltipTrigger>\n *   <TooltipContent>\n *     提示内容\n *     <TooltipArrow />\n *   </TooltipContent>\n * </Tooltip>\n * ```\n */\nexport function Tooltip(props: TooltipProps): JSX.Element {\n  const group = useTooltipGroupContext(); // undefined 是正常情况，代表没用 TooltipGroup\n\n  const [internalOpen, setInternalOpen] = createSignal(\n    props.defaultOpen ?? false,\n  );\n  const open = createMemo(() =>\n    props.open !== undefined ? props.open : internalOpen(),\n  );\n  const disabled = createMemo(() => !!props.disabled);\n\n  const [reference, setReference] = createSignal<Element>();\n  const [floating, setFloating] = createSignal<HTMLElement>();\n  const [pendingSlideFrom, setPendingSlideFrom] = createSignal<Rect>();\n  const [suppressExitAnimation, setSuppressExitAnimation] = createSignal(false);\n\n  const commit = (next: boolean) => {\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n\n  // 用 window.setTimeout/clearTimeout（而不是裸的全局 setTimeout）显式拿到\n  // DOM lib 的重载（返回 number），避免和 @types/node 的 NodeJS.Timeout 重载冲突。\n  let openTimer: number | undefined;\n  let closeTimer: number | undefined;\n\n  const clearTimers = () => {\n    if (openTimer !== undefined) {\n      window.clearTimeout(openTimer);\n      openTimer = undefined;\n    }\n    if (closeTimer !== undefined) {\n      window.clearTimeout(closeTimer);\n      closeTimer = undefined;\n    }\n  };\n\n  const requestOpen = () => {\n    clearTimers();\n    if (disabled() || open()) return;\n\n    // 组内抢占：如果当前组里已经有一个活跃的 tooltip（哪怕它还在自己的\n    // closeDelay 倒计时里，还没真正关闭），claim() 会立即强制关闭它、\n    // 把它此刻的矩形要回来——这里直接跳过 openDelay，走\"滑入\"路径。\n    const claimedRect = group?.claim();\n    if (claimedRect) {\n      setPendingSlideFrom(claimedRect);\n      commit(true);\n      return;\n    }\n\n    openTimer = window.setTimeout(\n      () => commit(true),\n      props.openDelay ?? DEFAULT_OPEN_DELAY,\n    );\n  };\n\n  const requestClose = () => {\n    clearTimers();\n    closeTimer = window.setTimeout(\n      () => commit(false),\n      props.closeDelay ?? DEFAULT_CLOSE_DELAY,\n    );\n  };\n\n  const openImmediate = () => {\n    if (disabled()) return;\n    clearTimers();\n    commit(true);\n  };\n\n  const closeImmediate = () => {\n    clearTimers();\n    commit(false);\n  };\n\n  /**\n   * 专门给 <TooltipGroup> 抢占用的关闭方式：和 closeImmediate 的区别是，\n   * 这里会额外标记 suppressExitAnimation，告诉 TooltipContent 的 Presence\n   * 逻辑跳过退场动画、立即卸载——因为这次关闭是\"被新 tooltip 取代\"，而不是\n   * 用户主动关闭，旧的应该立刻让位，不该和正在滑入的新 tooltip 同时可见。\n   * Escape/blur 等正常关闭场景依然走 closeImmediate，退场动画不受影响。\n   */\n  const forceCloseForGroup = () => {\n    setSuppressExitAnimation(true);\n    clearTimers();\n    commit(false);\n  };\n\n  const keepOpen = () => {\n    if (closeTimer !== undefined) {\n      window.clearTimeout(closeTimer);\n      closeTimer = undefined;\n    }\n  };\n\n  onCleanup(clearTimers);\n\n  // 打开期间把自己登记成\"组内当前活跃的 tooltip\"，供其他 trigger 打开时\n  // claim 走（触发平移过渡）。关闭或卸载时自动取消登记。\n  createEffect(() => {\n    if (!group || !open()) return;\n    const unregister = group.registerActive({\n      rect: () => floating()?.getBoundingClientRect(),\n      forceClose: forceCloseForGroup,\n    });\n    onCleanup(unregister);\n  });\n\n  const contentId = `tooltip-${createUniqueId()}`;\n\n  const ctx: TooltipContextValue = {\n    open,\n    disabled,\n    contentId,\n    reference,\n    setReference,\n    floating,\n    setFloating,\n    requestOpen,\n    requestClose,\n    openImmediate,\n    closeImmediate,\n    keepOpen,\n    pendingSlideFrom,\n    clearPendingSlideFrom: () => setPendingSlideFrom(undefined),\n    suppressExitAnimation,\n    consumeSuppressExitAnimation: () => {\n      const value = suppressExitAnimation();\n      if (value) setSuppressExitAnimation(false);\n      return value;\n    },\n  };\n\n  return (\n    <TooltipContext.Provider value={ctx}>\n      {props.children}\n    </TooltipContext.Provider>\n  );\n}\n"],"mappings":";;;;;AAaA,IAAMW,IAAqB,KACrBC,IAAsB;AAoB5B,SAAgBC,EAAQC,GAAkC;CACxD,IAAME,IAAQT,EAAuB,GAE/B,CAACU,GAAcC,KAAmBlB,EACtCc,EAAMK,eAAe,EACvB,GACMC,IAAOnB,QACXa,EAAMM,SAASC,KAAAA,IAAyBJ,EAAa,IAA1BH,EAAMM,IACnC,GACME,IAAWrB,QAAiB,CAAC,CAACa,EAAMQ,QAAQ,GAE5C,CAACC,GAAWC,KAAgBxB,EAAsB,GAClD,CAACyB,GAAUC,KAAe1B,EAA0B,GACpD,CAAC4B,GAAkBC,KAAuB7B,EAAmB,GAC7D,CAAC8B,GAAuBC,KAA4B/B,EAAa,EAAK,GAEtEgC,KAAUC,MAAkB;EAEhCnB,AADIA,EAAMM,SAASC,KAAAA,KAAWH,EAAgBe,CAAI,GAClDnB,EAAMoB,eAAeD,CAAI;CAC3B,GAIIE,GACAC,GAEEC,UAAoB;EAKxB,AAJIF,MAAcd,KAAAA,MAChBiB,OAAOC,aAAaJ,CAAS,GAC7BA,IAAYd,KAAAA,IAEVe,MAAef,KAAAA,MACjBiB,OAAOC,aAAaH,CAAU,GAC9BA,IAAaf,KAAAA;CAEjB,GAEMmB,UAAoB;EAExB,IADAH,EAAY,GACRf,EAAS,KAAKF,EAAK,GAAG;EAK1B,IAAMqB,IAAczB,GAAO0B,MAAM;EACjC,IAAID,GAAa;GAEfT,AADAH,EAAoBY,CAAW,GAC/BT,EAAO,EAAI;GACX;EACF;EAEAG,IAAYG,OAAOK,iBACXX,EAAO,EAAI,GACjBlB,EAAM8B,aAAajC,CACrB;CACF,GAEMkC,UAAqB;EAEzBT,AADAC,EAAY,GACZD,IAAaE,OAAOK,iBACZX,EAAO,EAAK,GAClBlB,EAAMgC,cAAclC,CACtB;CACF,GAEMmC,UAAsB;EACtBzB,EAAS,MACbe,EAAY,GACZL,EAAO,EAAI;CACb,GAEMgB,UAAuB;EAE3BhB,AADAK,EAAY,GACZL,EAAO,EAAK;CACd,GASMiB,UAA2B;EAG/BjB,AAFAD,EAAyB,EAAI,GAC7BM,EAAY,GACZL,EAAO,EAAK;CACd,GAEMkB,UAAiB;EACrB,AAAId,MAAef,KAAAA,MACjBiB,OAAOC,aAAaH,CAAU,GAC9BA,IAAaf,KAAAA;CAEjB;CAMAlB,AAJAC,EAAUiC,CAAW,GAIrBlC,QAAmB;EACjB,IAAI,CAACa,KAAS,CAACI,EAAK,GAAG;EACvB,IAAM+B,IAAanC,EAAMoC,eAAe;GACtCC,YAAY5B,EAAS,CAAC,EAAE6B,sBAAsB;GAC9CC,YAAYN;EACd,CAAC;EACD7C,EAAU+C,CAAU;CACtB,CAAC;CAID,IAAMM,IAA2B;EAC/BrC;EACAE;EACAkC,WAAAA,WAL2BtD,EAAe;EAM1CqB;EACAC;EACAC;EACAC;EACAc;EACAK;EACAE;EACAC;EACAE;EACAtB;EACA8B,6BAA6B7B,EAAoBR,KAAAA,CAAS;EAC1DS;EACA6B,oCAAoC;GAClC,IAAMC,IAAQ9B,EAAsB;GAEpC,OADI8B,KAAO7B,EAAyB,EAAK,GAClC6B;EACT;CACF;CAEA,OAAAC,EACGvD,EAAewD,UAAQ;EAACF,OAAOH;EAAG,IAAAM,WAAA;GAAA,OAChCjD,EAAMiD;EAAQ;CAAA,CAAA;AAGrB"}
+{"version":3,"file":"Tooltip.js","names":["createSignal","createMemo","createUniqueId","createEffect","onCleanup","JSX","TooltipContext","useTooltipProviderContext","useTooltipGroupContext","TooltipContextValue","TooltipProps","Rect","DEFAULT_OPEN_DELAY","DEFAULT_CLOSE_DELAY","Tooltip","props","Element","group","provider","internalOpen","setInternalOpen","defaultOpen","open","undefined","disabled","reference","setReference","floating","setFloating","HTMLElement","pendingSlideFrom","setPendingSlideFrom","suppressExitAnimation","setSuppressExitAnimation","commit","next","onOpenChange","openTimer","closeTimer","clearTimers","window","clearTimeout","requestOpen","claimedRect","claim","setTimeout","openDelay","delay","requestClose","closeDelay","openImmediate","closeImmediate","forceCloseForGroup","keepOpen","unregister","registerActive","rect","getBoundingClientRect","forceClose","contentId","ctx","clearPendingSlideFrom","consumeSuppressExitAnimation","value","_$createComponent","Provider","children"],"sources":["../../../../src/components/tooltip/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  createSignal,\n  createMemo,\n  createUniqueId,\n  createEffect,\n  onCleanup,\n  type JSX,\n} from \"solid-js\";\nimport { TooltipContext } from \"./Tooltip.context\";\nimport { useTooltipProviderContext } from \"../TooltipProvider/TooltipProvider.context\";\nimport { useTooltipGroupContext } from \"../TooltipGroup/TooltipGroup.context\";\nimport type { TooltipContextValue, TooltipProps } from \"./Tooltip.types\";\nimport type { Rect } from \"~/lib\";\n\nconst DEFAULT_OPEN_DELAY = 0;\nconst DEFAULT_CLOSE_DELAY = 150;\n\n/**\n * Tooltip 根组件：不渲染任何 DOM，只负责状态管理 + 提供 context。\n * 真正的展示交给 <TooltipTrigger>/<TooltipContent>/<TooltipArrow>。\n *\n * 如果外面包了 <TooltipGroup>，组内相邻 trigger 之间切换 hover 会跳过\n * openDelay，并触发\"从旧位置滑到新位置\"的过渡（细节见 TooltipGroup.context.ts）。\n *\n * @example\n * ```tsx\n * <Tooltip openDelay={300}>\n *   <TooltipTrigger>悬停我</TooltipTrigger>\n *   <TooltipContent>\n *     提示内容\n *     <TooltipArrow />\n *   </TooltipContent>\n * </Tooltip>\n * ```\n */\nexport function Tooltip(props: TooltipProps): JSX.Element {\n  const group = useTooltipGroupContext(); // undefined 是正常情况，代表没用 TooltipGroup\n  const provider = useTooltipProviderContext();\n\n  const [internalOpen, setInternalOpen] = createSignal(\n    props.defaultOpen ?? false,\n  );\n  const open = createMemo(() =>\n    props.open !== undefined ? props.open : internalOpen(),\n  );\n  const disabled = createMemo(() => !!props.disabled);\n\n  const [reference, setReference] = createSignal<Element>();\n  const [floating, setFloating] = createSignal<HTMLElement>();\n  const [pendingSlideFrom, setPendingSlideFrom] = createSignal<Rect>();\n  const [suppressExitAnimation, setSuppressExitAnimation] = createSignal(false);\n\n  const commit = (next: boolean) => {\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n\n  // 用 window.setTimeout/clearTimeout（而不是裸的全局 setTimeout）显式拿到\n  // DOM lib 的重载（返回 number），避免和 @types/node 的 NodeJS.Timeout 重载冲突。\n  let openTimer: number | undefined;\n  let closeTimer: number | undefined;\n\n  const clearTimers = () => {\n    if (openTimer !== undefined) {\n      window.clearTimeout(openTimer);\n      openTimer = undefined;\n    }\n    if (closeTimer !== undefined) {\n      window.clearTimeout(closeTimer);\n      closeTimer = undefined;\n    }\n  };\n\n  const requestOpen = () => {\n    clearTimers();\n    if (disabled() || open()) return;\n\n    // 组内抢占：如果当前组里已经有一个活跃的 tooltip（哪怕它还在自己的\n    // closeDelay 倒计时里，还没真正关闭），claim() 会立即强制关闭它、\n    // 把它此刻的矩形要回来——这里直接跳过 openDelay，走\"滑入\"路径。\n    const claimedRect = group?.claim();\n    if (claimedRect) {\n      setPendingSlideFrom(claimedRect);\n      commit(true);\n      return;\n    }\n\n    openTimer = window.setTimeout(\n      () => commit(true),\n      props.openDelay ?? provider?.delay() ?? DEFAULT_OPEN_DELAY,\n    );\n  };\n\n  const requestClose = () => {\n    clearTimers();\n    closeTimer = window.setTimeout(\n      () => commit(false),\n      props.closeDelay ?? provider?.closeDelay() ?? DEFAULT_CLOSE_DELAY,\n    );\n  };\n\n  const openImmediate = () => {\n    if (disabled()) return;\n    clearTimers();\n    commit(true);\n  };\n\n  const closeImmediate = () => {\n    clearTimers();\n    commit(false);\n  };\n\n  /**\n   * 专门给 <TooltipGroup> 抢占用的关闭方式：和 closeImmediate 的区别是，\n   * 这里会额外标记 suppressExitAnimation，告诉 TooltipContent 的 Presence\n   * 逻辑跳过退场动画、立即卸载——因为这次关闭是\"被新 tooltip 取代\"，而不是\n   * 用户主动关闭，旧的应该立刻让位，不该和正在滑入的新 tooltip 同时可见。\n   * Escape/blur 等正常关闭场景依然走 closeImmediate，退场动画不受影响。\n   */\n  const forceCloseForGroup = () => {\n    setSuppressExitAnimation(true);\n    clearTimers();\n    commit(false);\n  };\n\n  const keepOpen = () => {\n    if (closeTimer !== undefined) {\n      window.clearTimeout(closeTimer);\n      closeTimer = undefined;\n    }\n  };\n\n  onCleanup(clearTimers);\n\n  // 打开期间把自己登记成\"组内当前活跃的 tooltip\"，供其他 trigger 打开时\n  // claim 走（触发平移过渡）。关闭或卸载时自动取消登记。\n  createEffect(() => {\n    if (!group || !open()) return;\n    const unregister = group.registerActive({\n      rect: () => floating()?.getBoundingClientRect(),\n      forceClose: forceCloseForGroup,\n    });\n    onCleanup(unregister);\n  });\n\n  const contentId = `tooltip-${createUniqueId()}`;\n\n  const ctx: TooltipContextValue = {\n    open,\n    disabled,\n    contentId,\n    reference,\n    setReference,\n    floating,\n    setFloating,\n    requestOpen,\n    requestClose,\n    openImmediate,\n    closeImmediate,\n    keepOpen,\n    pendingSlideFrom,\n    clearPendingSlideFrom: () => setPendingSlideFrom(undefined),\n    suppressExitAnimation,\n    consumeSuppressExitAnimation: () => {\n      const value = suppressExitAnimation();\n      if (value) setSuppressExitAnimation(false);\n      return value;\n    },\n  };\n\n  return (\n    <TooltipContext.Provider value={ctx}>\n      {props.children}\n    </TooltipContext.Provider>\n  );\n}\n"],"mappings":";;;;;;AAcA,IAAMY,IAAqB,GACrBC,IAAsB;AAoB5B,SAAgBC,EAAQC,GAAkC;CACxD,IAAME,IAAQT,EAAuB,GAC/BU,IAAWX,EAA0B,GAErC,CAACY,GAAcC,KAAmBpB,EACtCe,EAAMM,eAAe,EACvB,GACMC,IAAOrB,QACXc,EAAMO,SAASC,KAAAA,IAAyBJ,EAAa,IAA1BJ,EAAMO,IACnC,GACME,IAAWvB,QAAiB,CAAC,CAACc,EAAMS,QAAQ,GAE5C,CAACC,GAAWC,KAAgB1B,EAAsB,GAClD,CAAC2B,GAAUC,KAAe5B,EAA0B,GACpD,CAAC8B,GAAkBC,KAAuB/B,EAAmB,GAC7D,CAACgC,GAAuBC,KAA4BjC,EAAa,EAAK,GAEtEkC,KAAUC,MAAkB;EAEhCpB,AADIA,EAAMO,SAASC,KAAAA,KAAWH,EAAgBe,CAAI,GAClDpB,EAAMqB,eAAeD,CAAI;CAC3B,GAIIE,GACAC,GAEEC,UAAoB;EAKxB,AAJIF,MAAcd,KAAAA,MAChBiB,OAAOC,aAAaJ,CAAS,GAC7BA,IAAYd,KAAAA,IAEVe,MAAef,KAAAA,MACjBiB,OAAOC,aAAaH,CAAU,GAC9BA,IAAaf,KAAAA;CAEjB,GAEMmB,UAAoB;EAExB,IADAH,EAAY,GACRf,EAAS,KAAKF,EAAK,GAAG;EAK1B,IAAMqB,IAAc1B,GAAO2B,MAAM;EACjC,IAAID,GAAa;GAEfT,AADAH,EAAoBY,CAAW,GAC/BT,EAAO,EAAI;GACX;EACF;EAEAG,IAAYG,OAAOK,iBACXX,EAAO,EAAI,GACjBnB,EAAM+B,aAAa5B,GAAU6B,MAAM,KAAKnC,CAC1C;CACF,GAEMoC,UAAqB;EAEzBV,AADAC,EAAY,GACZD,IAAaE,OAAOK,iBACZX,EAAO,EAAK,GAClBnB,EAAMkC,cAAc/B,GAAU+B,WAAW,KAAKpC,CAChD;CACF,GAEMqC,UAAsB;EACtB1B,EAAS,MACbe,EAAY,GACZL,EAAO,EAAI;CACb,GAEMiB,UAAuB;EAE3BjB,AADAK,EAAY,GACZL,EAAO,EAAK;CACd,GASMkB,UAA2B;EAG/BlB,AAFAD,EAAyB,EAAI,GAC7BM,EAAY,GACZL,EAAO,EAAK;CACd,GAEMmB,UAAiB;EACrB,AAAIf,MAAef,KAAAA,MACjBiB,OAAOC,aAAaH,CAAU,GAC9BA,IAAaf,KAAAA;CAEjB;CAMApB,AAJAC,EAAUmC,CAAW,GAIrBpC,QAAmB;EACjB,IAAI,CAACc,KAAS,CAACK,EAAK,GAAG;EACvB,IAAMgC,IAAarC,EAAMsC,eAAe;GACtCC,YAAY7B,EAAS,CAAC,EAAE8B,sBAAsB;GAC9CC,YAAYN;EACd,CAAC;EACDhD,EAAUkD,CAAU;CACtB,CAAC;CAID,IAAMM,IAA2B;EAC/BtC;EACAE;EACAmC,WAAAA,WAL2BzD,EAAe;EAM1CuB;EACAC;EACAC;EACAC;EACAc;EACAM;EACAE;EACAC;EACAE;EACAvB;EACA+B,6BAA6B9B,EAAoBR,KAAAA,CAAS;EAC1DS;EACA8B,oCAAoC;GAClC,IAAMC,IAAQ/B,EAAsB;GAEpC,OADI+B,KAAO9B,EAAyB,EAAK,GAClC8B;EACT;CACF;CAEA,OAAAC,EACG1D,EAAe2D,UAAQ;EAACF,OAAOH;EAAG,IAAAM,WAAA;GAAA,OAChCnD,EAAMmD;EAAQ;CAAA,CAAA;AAGrB"}

package/dist/components/tooltip/TooltipArrow/TooltipArrow.d.ts

@@ -1,34 +1,9 @@
 export interface TooltipArrowProps {
-    /** 箭头沿 tooltip 边缘方向的长度（像素），默认 8 */
-    width?: number;
-    /** 箭头突出的深度（像素），默认 4 */
-    height?: number;
-    /**
-     * 箭头颜色（Tailwind text-* class，因为 SVG 用 fill="currentColor"）。
-     * 不传的话默认跟 TooltipContent 的默认背景色一致；如果你自定义了
-     * TooltipContent 的背景色，记得这里也传一个匹配的颜色，两者不会自动同步。
-     */
     class?: string;
 }
 /**
- * 箭头组件，必须渲染在 <TooltipContent> 内部（依赖它的 context）。
- * 通过 context 拿到 arrow middleware 算出的偏移量，以及最终生效的 placement，
- * 从而知道该贴哪条边、三角形尖端朝哪个方向。
- *
- * 四个方向用四套独立坐标画三角形，而不是画一个形状再用 CSS rotate 复用——
- * 这是有意的：arrow middleware 用 el.offsetWidth/offsetHeight 判断"沿边长度"，
- * 而 CSS transform 不会改变这两个值，如果靠 rotate(90deg) 让同一个 8x4 的形状
- * "看起来"变成 4x8，offsetWidth/offsetHeight 读到的还是旋转前的 8x4，
- * 会导致 left/right 方向的偏移计算对不上。直接让未旋转的 SVG 本身尺寸
- * 就随方向切换（沿边方向用 width，突出方向用 height），从根上避免这个偏差。
- *
- * 进出场动画是箭头自己独立播放的一份（data-state + animate-in/out），
- * 和 TooltipContent 内层元素用的是同一个 animationState 信号驱动，
- * 保证两者严格同步开始/结束——而不是让箭头被动继承内层元素的动画。
- * 后者看似更省事，但内层元素的 zoom-in-95 动画会给它加一个非 none 的
- * transform，CSS 规范规定这会让内层变成子元素新的"包含块"，这和箭头
- * 故意跳过内层、以外层为基准定位的设计（避免触发滚动条那次的修复）相冲突，
- * 动画播放期间"父子两层谁负责定位"这个假设会变得不可靠，箭头容易之前观察到
- * "入场看起来比内容慢一拍"这类问题。独立播放同一份动画彻底避开这个耦合。
+ * 箭头组件，必须渲染在 <TooltipContent> 内部。
+ * 采用 shadcn Base UI 的定位方式：通过 data-side / data-align 和 CSS 变量
+ * 完成贴边与对齐，不手动计算 top/left。
  */
 export declare function TooltipArrow(props: TooltipArrowProps): import("solid-js").JSX.Element;

package/dist/components/tooltip/TooltipArrow/TooltipArrow.js

@@ -1,58 +1,26 @@
 import { clsx as e } from "../../../utils/clsx.js";
-import { useTooltipContentContext as t } from "../TooltipContent/TooltipContent.context.js";
-import { effect as n, setAttribute as r, style as i, template as a, use as o } from "solid-js/web";
+import { getAlignment as t, getSide as n } from "../../../lib/positioner/core/placement.js";
+import { useTooltipContentContext as r } from "../TooltipContent/TooltipContent.context.js";
+import { className as i, effect as a, setAttribute as o, setStyleProperty as s, template as c, use as l } from "solid-js/web";
+import { createMemo as u } from "solid-js";
 //#region src/components/tooltip/TooltipArrow/TooltipArrow.tsx
-var s = /*#__PURE__*/ a("<svg aria-hidden=true><polygon fill=currentColor>");
-function c(a) {
-	let c = t("TooltipArrow"), l = () => a.width ?? 8, u = () => a.height ?? 4, d = () => c.placement().split("-")[0], f = () => d() === "top" || d() === "bottom", p = () => c.middlewareData().arrow, m = () => {
-		let e = l(), t = u();
-		switch (d()) {
-			case "top": return `0,0 ${e},0 ${e / 2},${t}`;
-			case "bottom": return `0,${t} ${e},${t} ${e / 2},0`;
-			case "left": return `0,0 0,${e} ${t},${e / 2}`;
-			default: return `${t},0 ${t},${e} 0,${e / 2}`;
-		}
-	}, h = () => {
-		let e = u(), t = f() ? p()?.x ?? 0 : p()?.y ?? 0;
-		switch (d()) {
-			case "top": return {
-				bottom: `-${e}px`,
-				left: `${t}px`
-			};
-			case "bottom": return {
-				top: `-${e}px`,
-				left: `${t}px`
-			};
-			case "left": return {
-				right: `-${e}px`,
-				top: `${t}px`
-			};
-			default: return {
-				left: `-${e}px`,
-				top: `${t}px`
-			};
-		}
-	};
+var d = /*#__PURE__*/ c("<div aria-hidden=true>");
+function f(c) {
+	let f = r("TooltipArrow"), p = u(() => n(f.placement())), m = u(() => t(f.placement()) ?? "center"), h = () => f.reference?.()?.getBoundingClientRect().width ?? 0;
 	return (() => {
-		var t = s(), d = t.firstChild, p = c.setArrowElement;
-		return typeof p == "function" ? o(p, t) : c.setArrowElement = t, n((n) => {
-			var o = f() ? l() : u(), s = f() ? u() : l(), p = f() ? `0 0 ${l()} ${u()}` : `0 0 ${u()} ${l()}`, g = c.animationState(), _ = {
-				position: "absolute",
-				...h()
-			}, v = e("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", "text-foreground", a.class), y = m();
-			return o !== n.e && r(t, "width", n.e = o), s !== n.t && r(t, "height", n.t = s), p !== n.a && r(t, "viewBox", n.a = p), g !== n.o && r(t, "data-state", n.o = g), n.i = i(t, _, n.i), v !== n.n && r(t, "class", n.n = v), y !== n.s && r(d, "points", n.s = y), n;
+		var t = d(), n = f.setArrowElement;
+		return typeof n == "function" ? l(n, t) : f.setArrowElement = t, a((n) => {
+			var r = p(), a = m(), l = `${h() / 2}px`, u = e("absolute size-2.5 z-50 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-foreground fill-foreground", "data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2", "data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2", "data-[side=left]:top-1/2! data-[side=left]:right-[-0.175rem] data-[side=left]:-translate-y-1/2", "data-[side=right]:top-1/2! data-[side=right]:left-[-0.175rem] data-[side=right]:-translate-y-1/2", "data-[side=top]:-bottom-2.5 data-[side=top]:data-[align=center]:left-1/2 data-[side=top]:data-[align=center]:-translate-x-1/2 data-[side=top]:data-[align=start]:left-(--arrow-offset) data-[side=top]:data-[align=start]:-translate-x-1/2 data-[side=top]:data-[align=end]:right-(--arrow-offset) data-[side=top]:data-[align=end]:translate-x-1/2", "data-[side=bottom]:top-1 data-[side=bottom]:data-[align=center]:left-1/2 data-[side=bottom]:data-[align=center]:-translate-x-1/2 data-[side=bottom]:data-[align=start]:left-(--arrow-offset) data-[side=bottom]:data-[align=start]:-translate-x-1/2 data-[side=bottom]:data-[align=end]:right-(--arrow-offset) data-[side=bottom]:data-[align=end]:translate-x-1/2", c.class);
+			return r !== n.e && o(t, "data-side", n.e = r), a !== n.t && o(t, "data-align", n.t = a), l !== n.a && s(t, "--arrow-offset", n.a = l), u !== n.o && i(t, n.o = u), n;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0
+			o: void 0
 		}), t;
 	})();
 }
 //#endregion
-export { c as TooltipArrow };
+export { f as TooltipArrow };
 
 //# sourceMappingURL=TooltipArrow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipArrow.js","names":["clsx","useTooltipContentContext","TooltipArrowProps","width","height","class","TooltipArrow","props","ctx","alongLen","protrusion","side","placement","split","isVertical","arrowData","middlewareData","arrow","x","y","points","a","p","positionStyle","crossOffset","bottom","left","top","right","_el$","_tmpl$","_el$2","firstChild","_ref$","setArrowElement","_$use","_$effect","_p$","_v$","_v$2","_v$3","_v$4","animationState","_v$5","position","_v$6","_v$7","e","_$setAttribute","t","o","i","_$style","n","s","undefined"],"sources":["../../../../src/components/tooltip/TooltipArrow/TooltipArrow.tsx"],"sourcesContent":["import { clsx } from \"~/utils\";\nimport { useTooltipContentContext } from \"../TooltipContent/TooltipContent.context\";\n\nexport interface TooltipArrowProps {\n  /** 箭头沿 tooltip 边缘方向的长度（像素），默认 8 */\n  width?: number;\n  /** 箭头突出的深度（像素），默认 4 */\n  height?: number;\n  /**\n   * 箭头颜色（Tailwind text-* class，因为 SVG 用 fill=\"currentColor\"）。\n   * 不传的话默认跟 TooltipContent 的默认背景色一致；如果你自定义了\n   * TooltipContent 的背景色，记得这里也传一个匹配的颜色，两者不会自动同步。\n   */\n  class?: string;\n}\n\n/**\n * 箭头组件，必须渲染在 <TooltipContent> 内部（依赖它的 context）。\n * 通过 context 拿到 arrow middleware 算出的偏移量，以及最终生效的 placement，\n * 从而知道该贴哪条边、三角形尖端朝哪个方向。\n *\n * 四个方向用四套独立坐标画三角形，而不是画一个形状再用 CSS rotate 复用——\n * 这是有意的：arrow middleware 用 el.offsetWidth/offsetHeight 判断\"沿边长度\"，\n * 而 CSS transform 不会改变这两个值，如果靠 rotate(90deg) 让同一个 8x4 的形状\n * \"看起来\"变成 4x8，offsetWidth/offsetHeight 读到的还是旋转前的 8x4，\n * 会导致 left/right 方向的偏移计算对不上。直接让未旋转的 SVG 本身尺寸\n * 就随方向切换（沿边方向用 width，突出方向用 height），从根上避免这个偏差。\n *\n * 进出场动画是箭头自己独立播放的一份（data-state + animate-in/out），\n * 和 TooltipContent 内层元素用的是同一个 animationState 信号驱动，\n * 保证两者严格同步开始/结束——而不是让箭头被动继承内层元素的动画。\n * 后者看似更省事，但内层元素的 zoom-in-95 动画会给它加一个非 none 的\n * transform，CSS 规范规定这会让内层变成子元素新的\"包含块\"，这和箭头\n * 故意跳过内层、以外层为基准定位的设计（避免触发滚动条那次的修复）相冲突，\n * 动画播放期间\"父子两层谁负责定位\"这个假设会变得不可靠，箭头容易之前观察到\n * \"入场看起来比内容慢一拍\"这类问题。独立播放同一份动画彻底避开这个耦合。\n */\nexport function TooltipArrow(props: TooltipArrowProps) {\n  const ctx = useTooltipContentContext(\"TooltipArrow\");\n\n  const alongLen = () => props.width ?? 8;\n  const protrusion = () => props.height ?? 4;\n\n  const side = () =>\n    ctx.placement().split(\"-\")[0] as \"top\" | \"bottom\" | \"left\" | \"right\";\n  const isVertical = () => side() === \"top\" || side() === \"bottom\";\n\n  const arrowData = () =>\n    ctx.middlewareData().arrow as { x?: number; y?: number } | undefined;\n\n  const points = () => {\n    const a = alongLen();\n    const p = protrusion();\n    switch (side()) {\n      case \"top\":\n        return `0,0 ${a},0 ${a / 2},${p}`; // 尖端朝下，指向下方的 trigger\n      case \"bottom\":\n        return `0,${p} ${a},${p} ${a / 2},0`; // 尖端朝上\n      case \"left\":\n        return `0,0 0,${a} ${p},${a / 2}`; // 尖端朝右\n      default:\n        return `${p},0 ${p},${a} 0,${a / 2}`; // 尖端朝左\n    }\n  };\n\n  const positionStyle = () => {\n    const p = protrusion();\n    const crossOffset = isVertical()\n      ? (arrowData()?.x ?? 0)\n      : (arrowData()?.y ?? 0);\n    switch (side()) {\n      case \"top\":\n        return { bottom: `-${p}px`, left: `${crossOffset}px` };\n      case \"bottom\":\n        return { top: `-${p}px`, left: `${crossOffset}px` };\n      case \"left\":\n        return { right: `-${p}px`, top: `${crossOffset}px` };\n      default:\n        return { left: `-${p}px`, top: `${crossOffset}px` };\n    }\n  };\n\n  return (\n    <svg\n      ref={ctx.setArrowElement}\n      width={isVertical() ? alongLen() : protrusion()}\n      height={isVertical() ? protrusion() : alongLen()}\n      viewBox={\n        isVertical()\n          ? `0 0 ${alongLen()} ${protrusion()}`\n          : `0 0 ${protrusion()} ${alongLen()}`\n      }\n      data-state={ctx.animationState()}\n      style={{ position: \"absolute\", ...positionStyle() }}\n      class={clsx(\n        \"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\",\n        \"text-foreground\",\n        props.class,\n      )}\n      aria-hidden=\"true\"\n    >\n      <polygon points={points()} fill=\"currentColor\" />\n    </svg>\n  );\n}\n"],"mappings":";;;;;AAqCA,SAAgBM,EAAaC,GAA0B;CACrD,IAAMC,IAAMP,EAAyB,cAAc,GAE7CQ,UAAiBF,EAAMJ,SAAS,GAChCO,UAAmBH,EAAMH,UAAU,GAEnCO,UACJH,EAAII,UAAU,CAAC,CAACC,MAAM,GAAG,CAAC,CAAC,IACvBC,UAAmBH,EAAK,MAAM,SAASA,EAAK,MAAM,UAElDI,UACJP,EAAIQ,eAAe,CAAC,CAACC,OAEjBG,UAAe;EACnB,IAAMC,IAAIZ,EAAS,GACba,IAAIZ,EAAW;EACrB,QAAQC,EAAK,GAAb;GACE,KAAK,OACH,OAAO,OAAOU,EAAC,KAAMA,IAAI,EAAC,GAAIC;GAChC,KAAK,UACH,OAAO,KAAKA,EAAC,GAAID,EAAC,GAAIC,EAAC,GAAID,IAAI,EAAC;GAClC,KAAK,QACH,OAAO,SAASA,EAAC,GAAIC,EAAC,GAAID,IAAI;GAChC,SACE,OAAO,GAAGC,EAAC,KAAMA,EAAC,GAAID,EAAC,KAAMA,IAAI;EACrC;CACF,GAEME,UAAsB;EAC1B,IAAMD,IAAIZ,EAAW,GACfc,IAAcV,EAAW,IAC1BC,EAAU,CAAC,EAAEG,KAAK,IAClBH,EAAU,CAAC,EAAEI,KAAK;EACvB,QAAQR,EAAK,GAAb;GACE,KAAK,OACH,OAAO;IAAEc,QAAQ,IAAIH,EAAC;IAAMI,MAAM,GAAGF,EAAW;GAAK;GACvD,KAAK,UACH,OAAO;IAAEG,KAAK,IAAIL,EAAC;IAAMI,MAAM,GAAGF,EAAW;GAAK;GACpD,KAAK,QACH,OAAO;IAAEI,OAAO,IAAIN,EAAC;IAAMK,KAAK,GAAGH,EAAW;GAAK;GACrD,SACE,OAAO;IAAEE,MAAM,IAAIJ,EAAC;IAAMK,KAAK,GAAGH,EAAW;GAAK;EACtD;CACF;CAEA,cAAA;EAAA,IAAAK,IAAAC,EAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAESzB,EAAI0B;EAiBgB,OAjBD,OAAAD,KAAA,aAAAE,EAAAF,GAAAJ,CAAA,IAAnBrB,EAAI0B,kBAAeL,GAAAO,GAAAC,MAAA;GAAA,IAAAC,IACjBxB,EAAW,IAAIL,EAAS,IAAIC,EAAW,GAAC6B,IACvCzB,EAAW,IAAIJ,EAAW,IAAID,EAAS,GAAC+B,IAE9C1B,EAAW,IACP,OAAOL,EAAS,EAAC,GAAIC,EAAW,MAChC,OAAOA,EAAW,EAAC,GAAID,EAAS,KAAGgC,IAE7BjC,EAAIkC,eAAe,GAACC,IACzB;IAAEC,UAAU;IAAY,GAAGrB,EAAc;GAAE,GAACsB,IAC5C7C,EACL,wLACA,mBACAO,EAAMF,KACR,GAACyC,IAGgB1B,EAAO;GAAC,OAAAkB,MAAAD,EAAAU,KAAAC,EAAAnB,GAAA,SAAAQ,EAAAU,IAAAT,CAAA,GAAAC,MAAAF,EAAAY,KAAAD,EAAAnB,GAAA,UAAAQ,EAAAY,IAAAV,CAAA,GAAAC,MAAAH,EAAAhB,KAAA2B,EAAAnB,GAAA,WAAAQ,EAAAhB,IAAAmB,CAAA,GAAAC,MAAAJ,EAAAa,KAAAF,EAAAnB,GAAA,cAAAQ,EAAAa,IAAAT,CAAA,GAAAJ,EAAAc,IAAAC,EAAAvB,GAAAc,GAAAN,EAAAc,CAAA,GAAAN,MAAAR,EAAAgB,KAAAL,EAAAnB,GAAA,SAAAQ,EAAAgB,IAAAR,CAAA,GAAAC,MAAAT,EAAAiB,KAAAN,EAAAjB,GAAA,UAAAM,EAAAiB,IAAAR,CAAA,GAAAT;EAAA,GAAA;GAAAU,GAAAQ,KAAAA;GAAAN,GAAAM,KAAAA;GAAAlC,GAAAkC,KAAAA;GAAAL,GAAAK,KAAAA;GAAAJ,GAAAI,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;EAAA,CAAA,GAAA1B;CAAA,EAAA,CAAA;AAG/B"}
+{"version":3,"file":"TooltipArrow.js","names":["createMemo","getAlignment","getSide","clsx","useTooltipContentContext","TooltipArrowProps","class","TooltipArrow","props","ctx","side","placement","align","triggerWidth","reference","getBoundingClientRect","width","_el$","_tmpl$","_ref$","setArrowElement","_$use","_$effect","_p$","_v$","_v$2","_v$3","_v$4","e","_$setAttribute","t","a","_$setStyleProperty","o","_$className","undefined"],"sources":["../../../../src/components/tooltip/TooltipArrow/TooltipArrow.tsx"],"sourcesContent":["import { createMemo } from \"solid-js\";\nimport { getAlignment, getSide } from \"~/lib\";\nimport { clsx } from \"~/utils\";\nimport { useTooltipContentContext } from \"../TooltipContent/TooltipContent.context\";\n\nexport interface TooltipArrowProps {\n  class?: string;\n}\n\n/**\n * 箭头组件，必须渲染在 <TooltipContent> 内部。\n * 采用 shadcn Base UI 的定位方式：通过 data-side / data-align 和 CSS 变量\n * 完成贴边与对齐，不手动计算 top/left。\n */\nexport function TooltipArrow(props: TooltipArrowProps) {\n  const ctx = useTooltipContentContext(\"TooltipArrow\");\n\n  const side = createMemo(() => getSide(ctx.placement()));\n  const align = createMemo(() => getAlignment(ctx.placement()) ?? \"center\");\n\n  const triggerWidth = () =>\n    ctx.reference?.()?.getBoundingClientRect().width ?? 0;\n\n  return (\n    <div\n      ref={ctx.setArrowElement}\n      data-side={side()}\n      data-align={align()}\n      style={{ \"--arrow-offset\": `${triggerWidth() / 2}px` }}\n      class={clsx(\n        \"absolute size-2.5 z-50 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-foreground fill-foreground\",\n        \"data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2\",\n        \"data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2\",\n        \"data-[side=left]:top-1/2! data-[side=left]:right-[-0.175rem] data-[side=left]:-translate-y-1/2\",\n        \"data-[side=right]:top-1/2! data-[side=right]:left-[-0.175rem] data-[side=right]:-translate-y-1/2\",\n        \"data-[side=top]:-bottom-2.5 data-[side=top]:data-[align=center]:left-1/2 data-[side=top]:data-[align=center]:-translate-x-1/2 data-[side=top]:data-[align=start]:left-(--arrow-offset) data-[side=top]:data-[align=start]:-translate-x-1/2 data-[side=top]:data-[align=end]:right-(--arrow-offset) data-[side=top]:data-[align=end]:translate-x-1/2\",\n        \"data-[side=bottom]:top-1 data-[side=bottom]:data-[align=center]:left-1/2 data-[side=bottom]:data-[align=center]:-translate-x-1/2 data-[side=bottom]:data-[align=start]:left-(--arrow-offset) data-[side=bottom]:data-[align=start]:-translate-x-1/2 data-[side=bottom]:data-[align=end]:right-(--arrow-offset) data-[side=bottom]:data-[align=end]:translate-x-1/2\",\n        props.class,\n      )}\n      aria-hidden=\"true\"\n    />\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgBO,EAAaC,GAA0B;CACrD,IAAMC,IAAML,EAAyB,cAAc,GAE7CM,IAAOV,QAAiBE,EAAQO,EAAIE,UAAU,CAAC,CAAC,GAChDC,IAAQZ,QAAiBC,EAAaQ,EAAIE,UAAU,CAAC,KAAK,QAAQ,GAElEE,UACJJ,EAAIK,YAAY,CAAC,EAAEC,sBAAsB,CAAC,CAACC,SAAS;CAEtD,cAAA;EAAA,IAAAC,IAAAC,EAAA,GAAAC,IAESV,EAAIW;EAaR,OAbuB,OAAAD,KAAA,aAAAE,EAAAF,GAAAF,CAAA,IAAnBR,EAAIW,kBAAeH,GAAAK,GAAAC,MAAA;GAAA,IAAAC,IACbd,EAAK,GAACe,IACLb,EAAM,GAACc,IACQ,GAAGb,EAAa,IAAI,EAAC,KAAIc,IAC7CxB,EACL,0GACA,0GACA,iHACA,kGACA,oGACA,uVACA,sWACAK,EAAMF,KACR;GAAC,OAAAkB,MAAAD,EAAAK,KAAAC,EAAAZ,GAAA,aAAAM,EAAAK,IAAAJ,CAAA,GAAAC,MAAAF,EAAAO,KAAAD,EAAAZ,GAAA,cAAAM,EAAAO,IAAAL,CAAA,GAAAC,MAAAH,EAAAQ,KAAAC,EAAAf,GAAA,kBAAAM,EAAAQ,IAAAL,CAAA,GAAAC,MAAAJ,EAAAU,KAAAC,EAAAjB,GAAAM,EAAAU,IAAAN,CAAA,GAAAJ;EAAA,GAAA;GAAAK,GAAAO,KAAAA;GAAAL,GAAAK,KAAAA;GAAAJ,GAAAI,KAAAA;GAAAF,GAAAE,KAAAA;EAAA,CAAA,GAAAlB;CAAA,EAAA,CAAA;AAIP"}

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

@@ -3,6 +3,8 @@ import { MiddlewareData, Placement } from '../../../lib';
 export interface TooltipContentContextValue {
     /** createPositioner 产出的 middlewareData，TooltipArrow 从里面取 arrow 中间件算好的偏移量 */
     middlewareData: Accessor<MiddlewareData>;
+    /** 触发器元素访问器，TooltipArrow 用它计算 --arrow-offset */
+    reference: Accessor<Element | undefined>;
     /** 经过 flip 调整后的最终 placement，决定箭头贴哪条边、朝哪个方向 */
     placement: Accessor<Placement>;
     /** TooltipArrow 挂载时用来把自己的 DOM 节点注册给 arrow middleware（Element 而不是 HTMLElement，兼容 SVG 箭头） */

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.context.js","names":[],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.context.ts"],"sourcesContent":["import { createContext, useContext, type Accessor } from \"solid-js\";\nimport type { MiddlewareData, Placement } from \"~/lib\";\n\nexport interface TooltipContentContextValue {\n  /** createPositioner 产出的 middlewareData，TooltipArrow 从里面取 arrow 中间件算好的偏移量 */\n  middlewareData: Accessor<MiddlewareData>;\n  /** 经过 flip 调整后的最终 placement，决定箭头贴哪条边、朝哪个方向 */\n  placement: Accessor<Placement>;\n  /** TooltipArrow 挂载时用来把自己的 DOM 节点注册给 arrow middleware（Element 而不是 HTMLElement，兼容 SVG 箭头） */\n  setArrowElement: (el: Element) => void;\n  /**\n   * 驱动进出场动画的状态，和 TooltipContent 内层元素的 data-state 用的是\n   * 同一个信号——TooltipArrow 应该用它独立播放自己的一份动画，而不是依赖\n   * \"作为内层元素的子节点、被动继承内层的 transform/opacity 动画\"这种隐式\n   * 机制（内层的 zoom-in-95 动画会给它加一个非 none 的 transform，CSS 规范\n   * 规定这会让内层变成子元素新的\"包含块\"，和箭头故意跳过内层、以外层为\n   * 基准的设计相冲突，动画播放期间会让\"父子两层谁负责什么\"变得不可靠）。\n   */\n  animationState: Accessor<\"open\" | \"closed\">;\n}\n\nexport const TooltipContentContext =\n  createContext<TooltipContentContextValue>();\n\nexport function useTooltipContentContext(\n  component: string,\n): TooltipContentContextValue {\n  const ctx = useContext(TooltipContentContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <TooltipContent> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AAqBA,IAAa,IACX,EAA0C;AAE5C,SAAgB,EACd,GAC4B;CAC5B,IAAM,IAAM,EAAW,CAAqB;CAC5C,IAAI,CAAC,GACH,MAAU,MAAM,IAAI,EAAU,4BAA4B;CAE5D,OAAO;AACT"}
+{"version":3,"file":"TooltipContent.context.js","names":[],"sources":["../../../../src/components/tooltip/TooltipContent/TooltipContent.context.ts"],"sourcesContent":["import { createContext, useContext, type Accessor } from \"solid-js\";\nimport type { MiddlewareData, Placement } from \"~/lib\";\n\nexport interface TooltipContentContextValue {\n  /** createPositioner 产出的 middlewareData，TooltipArrow 从里面取 arrow 中间件算好的偏移量 */\n  middlewareData: Accessor<MiddlewareData>;\n  /** 触发器元素访问器，TooltipArrow 用它计算 --arrow-offset */\n  reference: Accessor<Element | undefined>;\n  /** 经过 flip 调整后的最终 placement，决定箭头贴哪条边、朝哪个方向 */\n  placement: Accessor<Placement>;\n  /** TooltipArrow 挂载时用来把自己的 DOM 节点注册给 arrow middleware（Element 而不是 HTMLElement，兼容 SVG 箭头） */\n  setArrowElement: (el: Element) => void;\n  /**\n   * 驱动进出场动画的状态，和 TooltipContent 内层元素的 data-state 用的是\n   * 同一个信号——TooltipArrow 应该用它独立播放自己的一份动画，而不是依赖\n   * \"作为内层元素的子节点、被动继承内层的 transform/opacity 动画\"这种隐式\n   * 机制（内层的 zoom-in-95 动画会给它加一个非 none 的 transform，CSS 规范\n   * 规定这会让内层变成子元素新的\"包含块\"，和箭头故意跳过内层、以外层为\n   * 基准的设计相冲突，动画播放期间会让\"父子两层谁负责什么\"变得不可靠）。\n   */\n  animationState: Accessor<\"open\" | \"closed\">;\n}\n\nexport const TooltipContentContext =\n  createContext<TooltipContentContextValue>();\n\nexport function useTooltipContentContext(\n  component: string,\n): TooltipContentContextValue {\n  const ctx = useContext(TooltipContentContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <TooltipContent> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AAuBA,IAAa,IACX,EAA0C;AAE5C,SAAgB,EACd,GAC4B;CAC5B,IAAM,IAAM,EAAW,CAAqB;CAC5C,IAAI,CAAC,GACH,MAAU,MAAM,IAAI,EAAU,4BAA4B;CAE5D,OAAO;AACT"}

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

@@ -53,12 +53,13 @@ function b(m) {
 						};
 					},
 					get class() {
-						return e("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);
+						return e("inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background", "has-data-[slot=kbd]:pr-1.5", "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", D.class);
 					}
 				}, O), !1, !0), l(m, s(a.Provider, {
 					get value() {
 						return {
 							middlewareData: x.middlewareData,
+							reference: b.reference,
 							placement: x.placement,
 							setArrowElement: w,
 							animationState: C

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.js","names":["Show","onCleanup","splitProps","Portal","useTooltipContent","TooltipContentContext","getTransformOrigin","getSide","getAlignment","TooltipContentProps","clsx","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\";\nimport { clsx } from \"~/utils\";\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={clsx(\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":";;;;;;;;;AAkBA,SAAgBW,EAAeC,GAA4B;CACzD,IAAM,EACJC,QACAC,QACAC,YACAC,mBACAC,oBACAC,sBACAC,kBACEf,QAAwBQ,CAAK,GAI3B,CAACQ,GAAOC,KAAQnB,EAAWU,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,OAAAU,EACGtB,GAAI;EAAA,IAACuB,OAAI;GAAA,OAAER,EAAQ;EAAC;EAAA,IAAAS,WAAA;GAAA,OAAAF,EAClBnB,GAAM,EAAA,IAAAqB,WAAA;IAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;IAwCqB,OAxCrBE,GAOGC,MAAO;KASX9B,AARAY,EAAImB,YAAYD,CAAE,GAQlB9B,QAAgBY,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,OACjBT,EAAQO,EAAI0B,UAAU,CAAC;KAAC;KAAA,IAAA,eAAA;MAAA,OACvBhC,EAAaM,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,oBAAoBxC,EAAmBQ,EAAI0B,UAAU,CAAC;OACtD,GAAI,OAAOpB,EAAM0B,SAAU,WAAW1B,EAAM0B,QAAQb,KAAAA;MACtD;KAAC;KAAA,IAAA,QAAA;MAAA,OACMvB,EACL,qEACA,yFACA,kGAMA,0CACA,0CACA,0CACA,0CACA,iCACAU,EAAM2B,KACR;KAAC;IAAA,GACG1B,CAAI,GAAA,IAAA,EAAA,GAAA2B,EAAAnB,GAAAP,EAEPjB,EAAsB4C,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"}
+{"version":3,"file":"TooltipContent.js","names":["Show","onCleanup","splitProps","Portal","useTooltipContent","TooltipContentContext","getTransformOrigin","getSide","getAlignment","TooltipContentProps","clsx","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","reference","_$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\";\nimport { clsx } from \"~/utils\";\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={clsx(\n                \"inline-flex w-fit max-w-xs items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background\",\n                \"has-data-[slot=kbd]:pr-1.5\",\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                local.class,\n              )}\n              {...rest}\n            >\n              <TooltipContentContext.Provider\n                value={{\n                  middlewareData: pos.middlewareData,\n                  reference: ctx.reference,\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":";;;;;;;;;AAkBA,SAAgBW,EAAeC,GAA4B;CACzD,IAAM,EACJC,QACAC,QACAC,YACAC,mBACAC,oBACAC,sBACAC,kBACEf,QAAwBQ,CAAK,GAI3B,CAACQ,GAAOC,KAAQnB,EAAWU,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,OAAAU,EACGtB,GAAI;EAAA,IAACuB,OAAI;GAAA,OAAER,EAAQ;EAAC;EAAA,IAAAS,WAAA;GAAA,OAAAF,EAClBnB,GAAM,EAAA,IAAAqB,WAAA;IAAA,IAAAC,IAAAC,EAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;IAwCqB,OAxCrBE,GAOGC,MAAO;KASX9B,AARAY,EAAImB,YAAYD,CAAE,GAQlB9B,QAAgBY,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,OACjBT,EAAQO,EAAI0B,UAAU,CAAC;KAAC;KAAA,IAAA,eAAA;MAAA,OACvBhC,EAAaM,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,oBAAoBxC,EAAmBQ,EAAI0B,UAAU,CAAC;OACtD,GAAI,OAAOpB,EAAM0B,SAAU,WAAW1B,EAAM0B,QAAQb,KAAAA;MACtD;KAAC;KAAA,IAAA,QAAA;MAAA,OACMvB,EACL,gHACA,8BACA,yFACA,kGAMA,0CACA,0CACA,0CACA,0CACAU,EAAM2B,KACR;KAAC;IAAA,GACG1B,CAAI,GAAA,IAAA,EAAA,GAAA2B,EAAAnB,GAAAP,EAEPjB,EAAsB4C,UAAQ;KAAA,IAC7BC,QAAK;MAAA,OAAE;OACLC,gBAAgBrC,EAAIqC;OACpBC,WAAWvC,EAAIuC;OACfZ,WAAW1B,EAAI0B;OACfvB;OACAD;MACF;KAAC;KAAA,IAAAQ,WAAA;MAAA,OAEAJ,EAAMI;KAAQ;IAAA,CAAA,CAAA,GAAA6B,GAAAC,MAAA;KAAA,IAAAC,IAvGLzC,EAAI0B,UAAU,GAACgB,IACxB;MACL,GAAG1C,EAAI2C,eAAe;MAEtBC,SAAS5C,KAAI6C,aAAa;KAC5B,GAACC,IAiBWzC,EAAW;KAAC,OAAAoC,MAAAD,EAAAO,KAAAC,EAAArC,GAAA,kBAAA6B,EAAAO,IAAAN,CAAA,GAAAD,EAAAS,IAAAC,EAAAvC,GAAA+B,GAAAF,EAAAS,CAAA,GAAAT,EAAAW,IAAAD,EAAArC,GAAAiC,GAAAN,EAAAW,CAAA,GAAAX;IAAA,GAAA;KAAAO,GAAA5B,KAAAA;KAAA8B,GAAA9B,KAAAA;KAAAgC,GAAAhC,KAAAA;IAAA,CAAA,GAAAR;GAAA,EAAA,CAAA;EAAA;CAAA,CAAA;AAyFlC"}

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

@@ -1,8 +1,9 @@
 import { Alignment, Side } from '../../../lib';
 import { BaseProps, PolymorphicProps } from '../../../types';
+export type TooltipSide = Side | "inline-start" | "inline-end";
 interface BaseTooltipContentProps extends BaseProps {
-    /** 贴 trigger 的哪一侧，默认 'top' */
-    side?: Side;
+    /** 贴 trigger 的哪一侧，默认 'top'。支持 Base UI 的 logical side。 */
+    side?: TooltipSide;
     /** 沿边对齐方式，默认 'center'（不偏移，居中对齐） */
     align?: Alignment | "center";
     /** 沿主轴（side 指向的方向）与 trigger 之间的间距（像素），默认 8 */

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

@@ -4,7 +4,8 @@ import { Middleware, Placement, Side, Alignment } from '../../../lib';
  * `Placement` 字符串（比如 side='top' + align='start' → 'top-start'）。
  * align 是 'center'（默认对齐、不偏移）时不带后缀，直接是 side 本身。
  */
-export declare function toPlacement(side: Side, align: Alignment | "center"): Placement;
+export declare function toPhysicalSide(side: Side | "inline-start" | "inline-end", dir?: string): Side;
+export declare function toPlacement(side: Side | "inline-start" | "inline-end", align: Alignment | "center", dir?: string): Placement;
 /**
  * 根据最终生效的 placement，算出缩放动画应该以哪个点为锚点（CSS transform-origin）。
  * 锚点应该落在"贴近 trigger 的那条边"上——比如 placement 是 'top'（content 在