@aloudata/aloudata-design 3.0.0-beta.15 → 3.0.0-beta.17

package/dist/Select/utils/getWidthStyle.js

@@ -2,7 +2,10 @@
 function getWidthStyle(width) {
 	if (typeof width === "number") return { width: `${width}px` };
 	if (width === "fill") return { width: "100%" };
-	if (width === "auto") return { width: "auto" };
+	if (width === "auto") return {
+		width: "auto",
+		flexShrink: 0
+	};
 	return {};
 }
 //#endregion

package/dist/Select/utils/getWidthStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"getWidthStyle.js","names":[],"sources":["../../../src/Select/utils/getWidthStyle.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport default function getWidthStyle(\n  width?: number | 'auto' | 'fill',\n): CSSProperties {\n  if (typeof width === 'number') {\n    return { width: `${width}px` };\n  }\n  if (width === 'fill') {\n    return { width: '100%' };\n  }\n  if (width === 'auto') {\n    return { width: 'auto' };\n  }\n  return {};\n}\n"],"mappings":";AAEA,SAAwB,cACtB,OACe;AACf,KAAI,OAAO,UAAU,SACnB,QAAO,EAAE,OAAO,GAAG,MAAM,KAAK;AAEhC,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,QAAO,EAAE"}
+{"version":3,"file":"getWidthStyle.js","names":[],"sources":["../../../src/Select/utils/getWidthStyle.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport default function getWidthStyle(\n  width?: number | 'auto' | 'fill',\n): CSSProperties {\n  if (typeof width === 'number') {\n    return { width: `${width}px` };\n  }\n  if (width === 'fill') {\n    return { width: '100%' };\n  }\n  if (width === 'auto') {\n    // flexShrink 0：auto 的语义是\"按内容定宽\"。根节点在 flex 父容器里默认可收缩，\n    // 而嵌套 flex（display:contents 包装 + basis-0）的 intrinsic 贡献被浏览器低估约 14px，\n    // 父容器按低估值布局后回头压缩根节点，导致 tag / placeholder 右侧被裁\n    return { width: 'auto', flexShrink: 0 };\n  }\n  return {};\n}\n"],"mappings":";AAEA,SAAwB,cACtB,OACe;AACf,KAAI,OAAO,UAAU,SACnB,QAAO,EAAE,OAAO,GAAG,MAAM,KAAK;AAEhC,KAAI,UAAU,OACZ,QAAO,EAAE,OAAO,QAAQ;AAE1B,KAAI,UAAU,OAIZ,QAAO;EAAE,OAAO;EAAQ,YAAY;EAAG;AAEzC,QAAO,EAAE"}

package/dist/Switch/index.js

@@ -27,7 +27,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
 	const thumbOffset = 2;
 	const thumbTranslate = trackW - thumbSize - thumbOffset * 2;
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn(className, "ald-switch", `ald-switch-${size}`, {
+		className: cn(className, "ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]", `ald-switch-${size}`, currentDisabled && "tw-pointer-events-none tw-cursor-default", {
 			"ald-switch-disabled": currentDisabled,
 			"ald-switch-checked": userChecked
 		}),
@@ -52,7 +52,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
 				}
 			})
 		}), children && /* @__PURE__ */ jsx("span", {
-			className: "ald-switch-text",
+			className: cn("ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--alias-colors-text-default)]", size === "large" && "tw-h-5 tw-text-base tw-leading-5", size === "middle" && "tw-h-4 tw-text-sm tw-leading-4", size === "small" && "tw-h-3 tw-text-xs tw-leading-3", currentDisabled && "tw-opacity-50"),
 			children
 		})]
 	});

package/dist/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n  checked: boolean,\n  event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n  className?: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  size?: SwitchSize;\n  onClick?: SwitchChangeEventHandler;\n  onChange?: SwitchChangeEventHandler;\n  children?: React.ReactNode;\n}\n\nconst Switch: React.FC<ISwitchProps> = ({\n  className = '',\n  disabled: customDisabled,\n  loading = false,\n  size: customSize,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  children,\n}) => {\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n\n  const [userChecked, setUserChecked] = useState(\n    typeof checked === 'undefined' ? defaultChecked : checked,\n  );\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const currentDisabled = loading ? true : mergedDisabled;\n\n  useEffect(() => {\n    if (typeof checked === 'boolean') {\n      setUserChecked(checked);\n    }\n  }, [checked]);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (currentDisabled) return;\n    const newChecked = !userChecked;\n    if (checked === undefined) {\n      setUserChecked(newChecked);\n    }\n    onChange?.(newChecked, e);\n    onClick?.(newChecked, e);\n  };\n\n  const isSmall = size === 'small';\n  const trackW = isSmall ? 28 : 36;\n  const trackH = isSmall ? 16 : 20;\n  const thumbSize = isSmall ? 12 : 16;\n  const thumbOffset = 2;\n  const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n  return (\n    <span\n      className={cn(className, 'ald-switch', `ald-switch-${size}`, {\n        'ald-switch-disabled': currentDisabled,\n        'ald-switch-checked': userChecked,\n      })}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={!!userChecked}\n        disabled={currentDisabled}\n        className={cn(\n          'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n          userChecked\n            ? 'tw-bg-[var(--alias-colors-icon-brand)] hover:tw-bg-[var(--alias-colors-icon-selected)]'\n            : 'tw-bg-[var(--alias-colors-icon-subtler)] hover:tw-bg-[var(--alias-colors-icon-subtle)]',\n          currentDisabled &&\n            'tw-cursor-not-allowed tw-bg-[var(--alias-colors-icon-disabled)] hover:tw-bg-[var(--alias-colors-icon-disabled)]',\n        )}\n        style={{ width: trackW, height: trackH }}\n        onClick={handleClick}\n      >\n        <span\n          className={cn(\n            'tw-block tw-rounded-full tw-bg-white tw-shadow-sm tw-transition-transform tw-duration-200',\n          )}\n          style={{\n            width: thumbSize,\n            height: thumbSize,\n            marginLeft: thumbOffset,\n            transform: userChecked\n              ? `translateX(${thumbTranslate}px)`\n              : 'translateX(0)',\n          }}\n        />\n      </button>\n      {children && <span className=\"ald-switch-text\">{children}</span>}\n    </span>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AAwBA,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,eACI;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,UAAU,SAAS;CACzB,MAAM,SAAS,UAAU,KAAK;CAC9B,MAAM,SAAS,UAAU,KAAK;CAC9B,MAAM,YAAY,UAAU,KAAK;CACjC,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GAAG,WAAW,cAAc,cAAc,QAAQ;GAC3D,uBAAuB;GACvB,sBAAsB;GACvB,CAAC;YAJJ,CAME,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,UAAU;GACV,WAAW,GACT,uJACA,cACI,2FACA,0FACJ,mBACE,kHACH;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,4FACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YAAY,oBAAC,QAAD;GAAM,WAAU;GAAmB;GAAgB,CAAA,CAC3D"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n  checked: boolean,\n  event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n  className?: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  size?: SwitchSize;\n  onClick?: SwitchChangeEventHandler;\n  onChange?: SwitchChangeEventHandler;\n  children?: React.ReactNode;\n}\n\nconst Switch: React.FC<ISwitchProps> = ({\n  className = '',\n  disabled: customDisabled,\n  loading = false,\n  size: customSize,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  children,\n}) => {\n  const contentSize = useContext(SizeContext);\n  const size = customSize || contentSize || 'middle';\n\n  const [userChecked, setUserChecked] = useState(\n    typeof checked === 'undefined' ? defaultChecked : checked,\n  );\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const currentDisabled = loading ? true : mergedDisabled;\n\n  useEffect(() => {\n    if (typeof checked === 'boolean') {\n      setUserChecked(checked);\n    }\n  }, [checked]);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (currentDisabled) return;\n    const newChecked = !userChecked;\n    if (checked === undefined) {\n      setUserChecked(newChecked);\n    }\n    onChange?.(newChecked, e);\n    onClick?.(newChecked, e);\n  };\n\n  const isSmall = size === 'small';\n  const trackW = isSmall ? 28 : 36;\n  const trackH = isSmall ? 16 : 20;\n  const thumbSize = isSmall ? 12 : 16;\n  const thumbOffset = 2;\n  const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n  return (\n    <span\n      className={cn(\n        className,\n        'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n        `ald-switch-${size}`,\n        currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n        {\n          'ald-switch-disabled': currentDisabled,\n          'ald-switch-checked': userChecked,\n        },\n      )}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={!!userChecked}\n        disabled={currentDisabled}\n        className={cn(\n          'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n          userChecked\n            ? 'tw-bg-[var(--alias-colors-icon-brand)] hover:tw-bg-[var(--alias-colors-icon-selected)]'\n            : 'tw-bg-[var(--alias-colors-icon-subtler)] hover:tw-bg-[var(--alias-colors-icon-subtle)]',\n          currentDisabled &&\n            'tw-cursor-not-allowed tw-bg-[var(--alias-colors-icon-disabled)] hover:tw-bg-[var(--alias-colors-icon-disabled)]',\n        )}\n        style={{ width: trackW, height: trackH }}\n        onClick={handleClick}\n      >\n        <span\n          className={cn(\n            'tw-block tw-rounded-full tw-bg-white tw-shadow-sm tw-transition-transform tw-duration-200',\n          )}\n          style={{\n            width: thumbSize,\n            height: thumbSize,\n            marginLeft: thumbOffset,\n            transform: userChecked\n              ? `translateX(${thumbTranslate}px)`\n              : 'translateX(0)',\n          }}\n        />\n      </button>\n      {children && (\n        <span\n          className={cn(\n            'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--alias-colors-text-default)]',\n            size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n            size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n            size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n            currentDisabled && 'tw-opacity-50',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AAwBA,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,eACI;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,UAAU,SAAS;CACzB,MAAM,SAAS,UAAU,KAAK;CAC9B,MAAM,SAAS,UAAU,KAAK;CAC9B,MAAM,YAAY,UAAU,KAAK;CACjC,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,UAAU;GACV,WAAW,GACT,uJACA,cACI,2FACA,0FACJ,mBACE,kHACH;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,4FACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,6GACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}

package/dist/Tabs/index.js

@@ -23,7 +23,8 @@ function Tabs(props) {
 	}, [items, children]);
 	const firstKey = resolvedItems[0]?.key || "";
 	const [innerActiveKey, setInnerActiveKey] = useState(defaultActiveKey || firstKey);
-	const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : innerActiveKey;
+	const mergedActiveKey = controlledActiveKey !== void 0 ? controlledActiveKey : innerActiveKey;
+	const activeKey = resolvedItems.some((item) => item.key === mergedActiveKey) ? mergedActiveKey : firstKey;
 	const handleTabClick = (key, e) => {
 		if (controlledActiveKey === void 0) setInnerActiveKey(key);
 		onChange?.(key);
@@ -103,34 +104,37 @@ function Tabs(props) {
 					children: /* @__PURE__ */ jsx(Memo, { size: 16 })
 				}),
 				/* @__PURE__ */ jsx("div", {
-					ref: navListRef,
-					className: cn("ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-flex-1 tw-overflow-hidden", isVertical && "tw-flex-col", monospace && "[&>*]:tw-flex-1", isCard ? "tw-gap-1" : !monospace && "tw-gap-8"),
-					style: !isVertical ? {
-						scrollbarWidth: "none",
-						msOverflowStyle: "none"
-					} : void 0,
-					children: resolvedItems.map((item) => {
-						const isActive = activeKey === item.key;
-						const showClose = isEditable && item.closable !== false;
-						return /* @__PURE__ */ jsxs("div", {
-							className: cn("ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors", isCard ? cn("tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5", "tw-gap-sp-75", isActive ? "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit") : cn(size === "small" ? "tw-py-2 tw-text-xs tw-leading-4" : "tw-py-2.5 tw-text-sm tw-leading-5", monospace && "tw-justify-center", isActive ? "tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit"), item.disabled && "tw-pointer-events-none tw-cursor-default tw-opacity-50"),
-							onClick: item.disabled ? void 0 : (e) => handleTabClick(item.key, e),
-							children: [
-								item.icon,
-								/* @__PURE__ */ jsx("span", {
-									className: "ant-tabs-tab-btn",
-									children: item.label
-								}),
-								showClose && /* @__PURE__ */ jsx("span", {
-									className: "ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]",
-									onClick: (e) => handleRemove(item.key, e),
-									"aria-label": `Remove ${item.label}`,
-									children: /* @__PURE__ */ jsx(Memo$2, { size: 12 })
-								}),
-								!isCard && isActive && !isVertical && /* @__PURE__ */ jsx("div", { className: "ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" }),
-								!isCard && isActive && isVertical && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" })
-							]
-						}, item.key);
+					className: "ald-tabs-nav-wrap ant-tabs-nav-wrap tw-min-w-0 tw-flex-1",
+					children: /* @__PURE__ */ jsx("div", {
+						ref: navListRef,
+						className: cn("ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden", isVertical && "tw-flex-col", monospace && "[&>*]:tw-flex-1", isCard ? "tw-gap-1" : !monospace && "tw-gap-8"),
+						style: !isVertical ? {
+							scrollbarWidth: "none",
+							msOverflowStyle: "none"
+						} : void 0,
+						children: resolvedItems.map((item) => {
+							const isActive = activeKey === item.key;
+							const showClose = isEditable && item.closable !== false;
+							return /* @__PURE__ */ jsxs("div", {
+								className: cn("ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors", isCard ? cn("tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5", "tw-gap-sp-75", isActive ? "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit") : cn(size === "small" ? "tw-py-2 tw-text-xs tw-leading-4" : "tw-py-2.5 tw-text-sm tw-leading-5", monospace && "tw-justify-center", isActive ? "tw-font-medium tw-text-[var(--alias-colors-text-selected)]" : "tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit"), item.disabled && "tw-pointer-events-none tw-cursor-default tw-opacity-50"),
+								onClick: item.disabled ? void 0 : (e) => handleTabClick(item.key, e),
+								children: [
+									item.icon,
+									/* @__PURE__ */ jsx("span", {
+										className: "ant-tabs-tab-btn",
+										children: item.label
+									}),
+									showClose && /* @__PURE__ */ jsx("span", {
+										className: "ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]",
+										onClick: (e) => handleRemove(item.key, e),
+										"aria-label": `Remove ${item.label}`,
+										children: /* @__PURE__ */ jsx(Memo$2, { size: 12 })
+									}),
+									!isCard && isActive && !isVertical && /* @__PURE__ */ jsx("div", { className: "ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" }),
+									!isCard && isActive && isVertical && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" })
+								]
+							}, item.key);
+						})
 					})
 				}),
 				showScrollButtons && !isVertical && /* @__PURE__ */ jsx("button", {
@@ -171,12 +175,12 @@ function Tabs(props) {
 				extraRight
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1",
+			className: cn("ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1", adaptHeight && "tw-h-full"),
 			children: resolvedItems.map((item) => {
 				const isActive = item.key === activeKey;
 				if (!isActive && destroyInactiveTabPane && !item.forceRender) return null;
 				return /* @__PURE__ */ jsx("div", {
-					className: cn("ald-tabs-tabpane ant-tabs-tabpane", isActive ? "ant-tabs-tabpane-active tw-block" : "tw-hidden"),
+					className: cn("ald-tabs-tabpane ant-tabs-tabpane", adaptHeight && "tw-h-full tw-overflow-y-auto", isActive ? "ant-tabs-tabpane-active tw-block" : "tw-hidden"),
 					role: "tabpanel",
 					children: item.children
 				}, item.key);

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  closable?: boolean;\n  icon?: React.ReactNode;\n  forceRender?: boolean;\n  className?: string;\n}\n\nexport interface ITabsProps {\n  size?: TabsSize;\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (activeKey: string) => void;\n  onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n  destroyInactiveTabPane?: boolean;\n  centered?: boolean;\n  adaptHeight?: boolean;\n  tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n  className?: string;\n  children?: React.ReactNode;\n  headerBackgroundColor?: string;\n  monospace?: boolean;\n  padding?: boolean | number;\n  compact?: boolean;\n  hasDividing?: boolean;\n  items?: TabItem[];\n  type?: 'line' | 'card' | 'editable-card';\n  tabBarExtraContent?:\n    | React.ReactNode\n    | { left?: React.ReactNode; right?: React.ReactNode };\n  onEdit?: (\n    targetKey: string | React.MouseEvent | React.KeyboardEvent,\n    action: 'add' | 'remove',\n  ) => void;\n  hideAdd?: boolean;\n  style?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n}\n\nexport default function Tabs(props: ITabsProps) {\n  const {\n    size,\n    className,\n    adaptHeight,\n    style = {},\n    monospace: propsMonospace,\n    tabPosition = 'top',\n    padding: propsPadding = false,\n    compact,\n    hasDividing = true,\n    items,\n    activeKey: controlledActiveKey,\n    defaultActiveKey,\n    onChange,\n    onTabClick,\n    destroyInactiveTabPane,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n  } = props;\n\n  const isEditable = type === 'editable-card';\n  const isCard = type === 'card' || type === 'editable-card';\n\n  // Derive items from children if not provided\n  const resolvedItems: TabItem[] = useMemo(() => {\n    if (items) return items;\n    return React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        key: child.key || child.props.key || '',\n        label: child.props.tab,\n        children: child.props.children,\n        disabled: child.props.disabled,\n        closable: child.props.closable,\n        forceRender: child.props.forceRender,\n      }));\n  }, [items, children]);\n\n  const firstKey = resolvedItems[0]?.key || '';\n  const [innerActiveKey, setInnerActiveKey] = useState(\n    defaultActiveKey || firstKey,\n  );\n  const activeKey =\n    controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n\n  const handleTabClick = (key: string, e: React.MouseEvent) => {\n    if (controlledActiveKey === undefined) {\n      setInnerActiveKey(key);\n    }\n    onChange?.(key);\n    onTabClick?.(key, e);\n  };\n\n  const handleRemove = (key: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEdit?.(key, 'remove');\n  };\n\n  const handleAdd = (e: React.MouseEvent) => {\n    onEdit?.(e, 'add');\n  };\n\n  const monospace = tabPosition !== 'top' ? false : propsMonospace;\n  const paddingVal = useMemo(() => {\n    if (tabPosition !== 'top') return 0;\n    if (typeof propsPadding === 'number') return propsPadding;\n    if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n    return 0;\n  }, [propsPadding, tabPosition]);\n\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n\n  const extraLeft =\n    tabBarExtraContent &&\n    typeof tabBarExtraContent === 'object' &&\n    'left' in tabBarExtraContent\n      ? tabBarExtraContent.left\n      : null;\n  const extraRight = tabBarExtraContent\n    ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n      ? tabBarExtraContent.right\n      : React.isValidElement(tabBarExtraContent)\n      ? tabBarExtraContent\n      : null\n    : null;\n\n  // Scroll state for overflow\n  const navListRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const el = navListRef.current;\n    if (!el || isVertical) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [isVertical]);\n\n  useEffect(() => {\n    checkScroll();\n    const el = navListRef.current;\n    if (!el) return;\n    // Use ResizeObserver to detect size changes\n    let ro: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(() => checkScroll());\n      ro.observe(el);\n    }\n    el.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', checkScroll);\n      ro?.disconnect();\n    };\n  }, [checkScroll, resolvedItems.length]);\n\n  const scrollBy = (delta: number) => {\n    const el = navListRef.current;\n    if (el) {\n      el.scrollBy({ left: delta, behavior: 'smooth' });\n    }\n  };\n\n  const showScrollButtons = canScrollLeft || canScrollRight;\n\n  return (\n    <div\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        isVertical ? 'tw-flex-row' : 'tw-flex-col',\n        adaptHeight && 'ald-adapt-height tw-h-full',\n        size !== 'small' && 'ald-tabs-default',\n        monospace && 'ald-tabs-monospace',\n        compact && 'ald-tabs-compact',\n        !hasDividing && 'ald-tabs-no-dividing',\n        className,\n      )}\n      style={\n        {\n          ...style,\n          '--header-bg-color': headerBackgroundColor,\n          '--tabs-padding': `${paddingVal}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Tab nav */}\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          'ald-tabs-nav ant-tabs-nav tw-flex tw-items-center',\n          !isVertical &&\n            hasDividing &&\n            'tw-mb-5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n          !isVertical && compact && '!tw-mb-0',\n          isVertical &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n          paddingVal && `tw-px-[${paddingVal}px]`,\n        )}\n        style={\n          headerBackgroundColor\n            ? { backgroundColor: headerBackgroundColor }\n            : undefined\n        }\n      >\n        {extraLeft}\n\n        {/* Scroll left button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollLeft && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(-200)}\n            aria-label=\"Scroll tabs left\"\n          >\n            <ChevronLeftLine size={16} />\n          </button>\n        )}\n\n        <div\n          ref={navListRef}\n          className={cn(\n            // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n            'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-flex-1 tw-overflow-hidden',\n            isVertical && 'tw-flex-col',\n            monospace && '[&>*]:tw-flex-1',\n            isCard ? 'tw-gap-1' : !monospace && 'tw-gap-8',\n          )}\n          style={\n            !isVertical\n              ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n              : undefined\n          }\n        >\n          {resolvedItems.map((item) => {\n            const isActive = activeKey === item.key;\n            // For editable-card, closable defaults to true unless explicitly set to false\n            const showClose = isEditable && item.closable !== false;\n\n            return (\n              <div\n                key={item.key}\n                className={cn(\n                  // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                  'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n                  // Card / editable-card styling\n                  isCard\n                    ? cn(\n                        'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n                        'tw-gap-sp-75',\n                        isActive\n                          ? 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                          : 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                      )\n                    : cn(\n                        size === 'small'\n                          ? 'tw-py-2 tw-text-xs tw-leading-4'\n                          : 'tw-py-2.5 tw-text-sm tw-leading-5',\n                        monospace && 'tw-justify-center',\n                        isActive\n                          ? 'tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                          : 'tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                      ),\n                  item.disabled &&\n                    'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n                )}\n                onClick={\n                  item.disabled ? undefined : (e) => handleTabClick(item.key, e)\n                }\n              >\n                {item.icon}\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n                {/* Close button for editable-card */}\n                {showClose && (\n                  <span\n                    className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]\"\n                    onClick={(e) => handleRemove(item.key, e)}\n                    aria-label={`Remove ${item.label}`}\n                  >\n                    <CloseLightLine size={12} />\n                  </span>\n                )}\n                {/* Active indicator for non-card line tabs */}\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                {!isCard && isActive && !isVertical && (\n                  <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                )}\n                {!isCard && isActive && isVertical && (\n                  <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Scroll right button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollRight && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(200)}\n            aria-label=\"Scroll tabs right\"\n          >\n            <ChevronRightLine size={16} />\n          </button>\n        )}\n\n        {/* Add button for editable-card */}\n        {isEditable && !hideAdd && (\n          <button\n            type=\"button\"\n            className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n            onClick={handleAdd}\n            aria-label=\"Add tab\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </button>\n        )}\n\n        {extraRight}\n      </div>\n\n      {/* Tab content */}\n      {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n      <div className=\"ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1\">\n        {resolvedItems.map((item) => {\n          const isActive = item.key === activeKey;\n          if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n            return null;\n          }\n          return (\n            <div\n              key={item.key}\n              className={cn(\n                // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                'ald-tabs-tabpane ant-tabs-tabpane',\n                isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n              )}\n              role=\"tabpanel\"\n            >\n              {item.children}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  closable?: boolean;\n  icon?: React.ReactNode;\n  forceRender?: boolean;\n  className?: string;\n}\n\nexport interface ITabsProps {\n  size?: TabsSize;\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (activeKey: string) => void;\n  onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n  destroyInactiveTabPane?: boolean;\n  centered?: boolean;\n  adaptHeight?: boolean;\n  tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n  className?: string;\n  children?: React.ReactNode;\n  headerBackgroundColor?: string;\n  monospace?: boolean;\n  padding?: boolean | number;\n  compact?: boolean;\n  hasDividing?: boolean;\n  items?: TabItem[];\n  type?: 'line' | 'card' | 'editable-card';\n  tabBarExtraContent?:\n    | React.ReactNode\n    | { left?: React.ReactNode; right?: React.ReactNode };\n  onEdit?: (\n    targetKey: string | React.MouseEvent | React.KeyboardEvent,\n    action: 'add' | 'remove',\n  ) => void;\n  hideAdd?: boolean;\n  style?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n}\n\nexport default function Tabs(props: ITabsProps) {\n  const {\n    size,\n    className,\n    adaptHeight,\n    style = {},\n    monospace: propsMonospace,\n    tabPosition = 'top',\n    padding: propsPadding = false,\n    compact,\n    hasDividing = true,\n    items,\n    activeKey: controlledActiveKey,\n    defaultActiveKey,\n    onChange,\n    onTabClick,\n    destroyInactiveTabPane,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n  } = props;\n\n  const isEditable = type === 'editable-card';\n  const isCard = type === 'card' || type === 'editable-card';\n\n  // Derive items from children if not provided\n  const resolvedItems: TabItem[] = useMemo(() => {\n    if (items) return items;\n    return React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        key: child.key || child.props.key || '',\n        label: child.props.tab,\n        children: child.props.children,\n        disabled: child.props.disabled,\n        closable: child.props.closable,\n        forceRender: child.props.forceRender,\n      }));\n  }, [items, children]);\n\n  const firstKey = resolvedItems[0]?.key || '';\n  const [innerActiveKey, setInnerActiveKey] = useState(\n    defaultActiveKey || firstKey,\n  );\n  const mergedActiveKey =\n    controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n  const activeKey = resolvedItems.some((item) => item.key === mergedActiveKey)\n    ? mergedActiveKey\n    : firstKey;\n\n  const handleTabClick = (key: string, e: React.MouseEvent) => {\n    if (controlledActiveKey === undefined) {\n      setInnerActiveKey(key);\n    }\n    onChange?.(key);\n    onTabClick?.(key, e);\n  };\n\n  const handleRemove = (key: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEdit?.(key, 'remove');\n  };\n\n  const handleAdd = (e: React.MouseEvent) => {\n    onEdit?.(e, 'add');\n  };\n\n  const monospace = tabPosition !== 'top' ? false : propsMonospace;\n  const paddingVal = useMemo(() => {\n    if (tabPosition !== 'top') return 0;\n    if (typeof propsPadding === 'number') return propsPadding;\n    if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n    return 0;\n  }, [propsPadding, tabPosition]);\n\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n\n  const extraLeft =\n    tabBarExtraContent &&\n    typeof tabBarExtraContent === 'object' &&\n    'left' in tabBarExtraContent\n      ? tabBarExtraContent.left\n      : null;\n  const extraRight = tabBarExtraContent\n    ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n      ? tabBarExtraContent.right\n      : React.isValidElement(tabBarExtraContent)\n      ? tabBarExtraContent\n      : null\n    : null;\n\n  // Scroll state for overflow\n  const navListRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const el = navListRef.current;\n    if (!el || isVertical) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [isVertical]);\n\n  useEffect(() => {\n    checkScroll();\n    const el = navListRef.current;\n    if (!el) return;\n    // Use ResizeObserver to detect size changes\n    let ro: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(() => checkScroll());\n      ro.observe(el);\n    }\n    el.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', checkScroll);\n      ro?.disconnect();\n    };\n  }, [checkScroll, resolvedItems.length]);\n\n  const scrollBy = (delta: number) => {\n    const el = navListRef.current;\n    if (el) {\n      el.scrollBy({ left: delta, behavior: 'smooth' });\n    }\n  };\n\n  const showScrollButtons = canScrollLeft || canScrollRight;\n\n  return (\n    <div\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        isVertical ? 'tw-flex-row' : 'tw-flex-col',\n        adaptHeight && 'ald-adapt-height tw-h-full',\n        size !== 'small' && 'ald-tabs-default',\n        monospace && 'ald-tabs-monospace',\n        compact && 'ald-tabs-compact',\n        !hasDividing && 'ald-tabs-no-dividing',\n        className,\n      )}\n      style={\n        {\n          ...style,\n          '--header-bg-color': headerBackgroundColor,\n          '--tabs-padding': `${paddingVal}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Tab nav */}\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          'ald-tabs-nav ant-tabs-nav tw-flex tw-items-center',\n          !isVertical &&\n            hasDividing &&\n            'tw-mb-5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n          !isVertical && compact && '!tw-mb-0',\n          isVertical &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n          paddingVal && `tw-px-[${paddingVal}px]`,\n        )}\n        style={\n          headerBackgroundColor\n            ? { backgroundColor: headerBackgroundColor }\n            : undefined\n        }\n      >\n        {extraLeft}\n\n        {/* Scroll left button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollLeft && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(-200)}\n            aria-label=\"Scroll tabs left\"\n          >\n            <ChevronLeftLine size={16} />\n          </button>\n        )}\n\n        <div className=\"ald-tabs-nav-wrap ant-tabs-nav-wrap tw-min-w-0 tw-flex-1\">\n          <div\n            ref={navListRef}\n            className={cn(\n              // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n              'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden',\n              isVertical && 'tw-flex-col',\n              monospace && '[&>*]:tw-flex-1',\n              isCard ? 'tw-gap-1' : !monospace && 'tw-gap-8',\n            )}\n            style={\n              !isVertical\n                ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n                : undefined\n            }\n          >\n            {resolvedItems.map((item) => {\n              const isActive = activeKey === item.key;\n              // For editable-card, closable defaults to true unless explicitly set to false\n              const showClose = isEditable && item.closable !== false;\n\n              return (\n                <div\n                  key={item.key}\n                  className={cn(\n                    // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                    'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n                    // Card / editable-card styling\n                    isCard\n                      ? cn(\n                          'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n                          'tw-gap-sp-75',\n                          isActive\n                            ? 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                            : 'tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtler)] tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                        )\n                      : cn(\n                          size === 'small'\n                            ? 'tw-py-2 tw-text-xs tw-leading-4'\n                            : 'tw-py-2.5 tw-text-sm tw-leading-5',\n                          monospace && 'tw-justify-center',\n                          isActive\n                            ? 'tw-font-medium tw-text-[var(--alias-colors-text-selected)]'\n                            : 'tw-font-medium tw-text-[var(--alias-colors-text-subtle)] hover:tw-text-inherit',\n                        ),\n                    item.disabled &&\n                      'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n                  )}\n                  onClick={\n                    item.disabled\n                      ? undefined\n                      : (e) => handleTabClick(item.key, e)\n                  }\n                >\n                  {item.icon}\n                  {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                  <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n                  {/* Close button for editable-card */}\n                  {showClose && (\n                    <span\n                      className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--alias-colors-icon-subtle)] tw-transition-colors hover:tw-text-[var(--alias-colors-text-default)]\"\n                      onClick={(e) => handleRemove(item.key, e)}\n                      aria-label={`Remove ${item.label}`}\n                    >\n                      <CloseLightLine size={12} />\n                    </span>\n                  )}\n                  {/* Active indicator for non-card line tabs */}\n                  {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                  {!isCard && isActive && !isVertical && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                  )}\n                  {!isCard && isActive && isVertical && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Scroll right button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollRight && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(200)}\n            aria-label=\"Scroll tabs right\"\n          >\n            <ChevronRightLine size={16} />\n          </button>\n        )}\n\n        {/* Add button for editable-card */}\n        {isEditable && !hideAdd && (\n          <button\n            type=\"button\"\n            className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n            onClick={handleAdd}\n            aria-label=\"Add tab\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </button>\n        )}\n\n        {extraRight}\n      </div>\n\n      {/* Tab content */}\n      {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n      <div\n        className={cn(\n          'ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1',\n          adaptHeight && 'tw-h-full',\n        )}\n      >\n        {resolvedItems.map((item) => {\n          const isActive = item.key === activeKey;\n          if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n            return null;\n          }\n          return (\n            <div\n              key={item.key}\n              className={cn(\n                // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                'ald-tabs-tabpane ant-tabs-tabpane',\n                // v2 行为：adaptHeight 时 tabpane 撑满内容区，子元素的百分比高度才能解析\n                adaptHeight && 'tw-h-full tw-overflow-y-auto',\n                isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n              )}\n              role=\"tabpanel\"\n            >\n              {item.children}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}

package/dist/Tooltip/index.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -68,7 +69,7 @@ function ClickTooltip({ children, title, open, onOpenChange, placement = "top",
 				align,
 				sideOffset: 4,
 				className: cn(contentClasses, overlayClassName),
-				style: zIndex !== null && zIndex !== void 0 ? { zIndex } : void 0,
+				style: { zIndex },
 				children: [title, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]" })]
 			})
 		})]
@@ -77,6 +78,7 @@ function ClickTooltip({ children, title, open, onOpenChange, placement = "top",
 function Tooltip(props) {
 	const { children, title, open, onOpenChange, placement = "top", mouseEnterDelay = 0, mouseLeaveDelay = 0, overlayClassName, trigger, getPopupContainer, getTooltipContainer, zIndex } = props;
 	const { triggerRef, container } = usePortalContainer(getPopupContainer, getTooltipContainer);
+	const resolvedZIndex = useFloatingPopupZIndex(zIndex);
 	if (!title && title !== 0) return /* @__PURE__ */ jsx(Fragment, { children });
 	if (isTriggerDisabled(trigger)) return /* @__PURE__ */ jsx(Fragment, { children });
 	if (isClickTrigger(trigger)) return /* @__PURE__ */ jsx(ClickTooltip, {
@@ -85,7 +87,7 @@ function Tooltip(props) {
 		onOpenChange,
 		placement,
 		overlayClassName,
-		zIndex,
+		zIndex: resolvedZIndex,
 		container,
 		triggerRef,
 		children
@@ -111,7 +113,7 @@ function Tooltip(props) {
 					align,
 					sideOffset: 4,
 					className: cn(contentClasses, overlayClassName),
-					style: zIndex !== null && zIndex !== void 0 ? { zIndex } : void 0,
+					style: { zIndex: resolvedZIndex },
 					children: [title, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]" })]
 				})
 			})]

package/dist/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';\n\nexport interface ITooltipProps {\n  title?: React.ReactNode;\n  /** Alias for title, for Popover-style usage */\n  content?: React.ReactNode;\n  destroyTooltipOnHide?: boolean;\n  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  placement?:\n    | 'top'\n    | 'left'\n    | 'right'\n    | 'bottom'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom';\n  trigger?: ActionType | ActionType[];\n  zIndex?: number;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  overlayClassName?: string;\n  /** Custom class for the root element */\n  rootClassName?: string;\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst sideMap: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  topLeft: 'top',\n  topRight: 'top',\n  bottomLeft: 'bottom',\n  bottomRight: 'bottom',\n  leftTop: 'left',\n  leftBottom: 'left',\n  rightTop: 'right',\n  rightBottom: 'right',\n};\n\nconst alignMap: Record<string, 'start' | 'end' | 'center'> = {\n  topLeft: 'start',\n  topRight: 'end',\n  bottomLeft: 'start',\n  bottomRight: 'end',\n  leftTop: 'start',\n  leftBottom: 'end',\n  rightTop: 'start',\n  rightBottom: 'end',\n};\n\nfunction isClickTrigger(trigger?: ActionType | ActionType[]): boolean {\n  if (!trigger) return false;\n  if (Array.isArray(trigger)) return trigger.includes('click');\n  return trigger === 'click';\n}\n\nfunction isTriggerDisabled(trigger?: ActionType | ActionType[]): boolean {\n  return Array.isArray(trigger) && trigger.length === 0;\n}\n\nconst contentClasses =\n  'ald-tooltip-overlay tw-z-50 tw-min-h-[28px] tw-rounded-r-50 tw-px-2 tw-py-1.5 tw-text-xs tw-leading-4 tw-bg-[var(--alias-colors-bg-skeleton-inverse-subtler)] tw-text-[var(--alias-colors-text-inverse-strong)] tw-animate-in tw-fade-in-0 tw-zoom-in-95';\n\nfunction usePortalContainer(\n  getPopupContainer?: (node: HTMLElement) => HTMLElement,\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement,\n) {\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  const [container, setContainer] = React.useState<HTMLElement | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const getter = getPopupContainer || getTooltipContainer;\n    if (getter && triggerRef.current) {\n      setContainer(getter(triggerRef.current));\n    }\n  }, [getPopupContainer, getTooltipContainer]);\n\n  return { triggerRef, container };\n}\n\nfunction ClickTooltip({\n  children,\n  title,\n  open,\n  onOpenChange,\n  placement = 'top',\n  overlayClassName,\n  zIndex,\n  container,\n  triggerRef,\n}: Pick<\n  ITooltipProps,\n  | 'children'\n  | 'title'\n  | 'open'\n  | 'onOpenChange'\n  | 'placement'\n  | 'overlayClassName'\n  | 'zIndex'\n> & {\n  container?: HTMLElement;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}) {\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n\n  return (\n    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <PopoverPrimitive.Trigger asChild>\n        {React.isValidElement(children) ? (\n          React.cloneElement(children as React.ReactElement, {\n            ref: triggerRef,\n          })\n        ) : (\n          <span ref={triggerRef as React.RefObject<HTMLSpanElement>}>\n            {children}\n          </span>\n        )}\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal container={container}>\n        <PopoverPrimitive.Content\n          side={side}\n          align={align}\n          sideOffset={4}\n          className={cn(contentClasses, overlayClassName)}\n          style={\n            zIndex !== null && zIndex !== undefined ? { zIndex } : undefined\n          }\n        >\n          {title}\n          <PopoverPrimitive.Arrow className=\"tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]\" />\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport default function Tooltip(props: ITooltipProps) {\n  const {\n    children,\n    title,\n    open,\n    onOpenChange,\n    placement = 'top',\n    mouseEnterDelay = 0,\n    mouseLeaveDelay = 0,\n    overlayClassName,\n    trigger,\n    getPopupContainer,\n    getTooltipContainer,\n    zIndex,\n  } = props;\n\n  const { triggerRef, container } = usePortalContainer(\n    getPopupContainer,\n    getTooltipContainer,\n  );\n\n  if (!title && title !== 0) {\n    return <>{children}</>;\n  }\n\n  if (isTriggerDisabled(trigger)) {\n    return <>{children}</>;\n  }\n\n  if (isClickTrigger(trigger)) {\n    return (\n      <ClickTooltip\n        title={title}\n        open={open}\n        onOpenChange={onOpenChange}\n        placement={placement}\n        overlayClassName={overlayClassName}\n        zIndex={zIndex}\n        container={container}\n        triggerRef={triggerRef}\n      >\n        {children}\n      </ClickTooltip>\n    );\n  }\n\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={mouseEnterDelay * 1000}\n      skipDelayDuration={mouseLeaveDelay * 1000}\n    >\n      <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>\n          {React.isValidElement(children) ? (\n            React.cloneElement(children as React.ReactElement, {\n              ref: triggerRef,\n            })\n          ) : (\n            <span ref={triggerRef as React.RefObject<HTMLSpanElement>}>\n              {children}\n            </span>\n          )}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            side={side}\n            align={align}\n            sideOffset={4}\n            className={cn(contentClasses, overlayClassName)}\n            style={\n              zIndex !== null && zIndex !== undefined ? { zIndex } : undefined\n            }\n          >\n            {title}\n            <TooltipPrimitive.Arrow className=\"tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]\" />\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport React from 'react';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';\n\nexport interface ITooltipProps {\n  title?: React.ReactNode;\n  /** Alias for title, for Popover-style usage */\n  content?: React.ReactNode;\n  destroyTooltipOnHide?: boolean;\n  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;\n  mouseEnterDelay?: number;\n  mouseLeaveDelay?: number;\n  placement?:\n    | 'top'\n    | 'left'\n    | 'right'\n    | 'bottom'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom';\n  trigger?: ActionType | ActionType[];\n  zIndex?: number;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  overlayClassName?: string;\n  /** Custom class for the root element */\n  rootClassName?: string;\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst sideMap: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  topLeft: 'top',\n  topRight: 'top',\n  bottomLeft: 'bottom',\n  bottomRight: 'bottom',\n  leftTop: 'left',\n  leftBottom: 'left',\n  rightTop: 'right',\n  rightBottom: 'right',\n};\n\nconst alignMap: Record<string, 'start' | 'end' | 'center'> = {\n  topLeft: 'start',\n  topRight: 'end',\n  bottomLeft: 'start',\n  bottomRight: 'end',\n  leftTop: 'start',\n  leftBottom: 'end',\n  rightTop: 'start',\n  rightBottom: 'end',\n};\n\nfunction isClickTrigger(trigger?: ActionType | ActionType[]): boolean {\n  if (!trigger) return false;\n  if (Array.isArray(trigger)) return trigger.includes('click');\n  return trigger === 'click';\n}\n\nfunction isTriggerDisabled(trigger?: ActionType | ActionType[]): boolean {\n  return Array.isArray(trigger) && trigger.length === 0;\n}\n\nconst contentClasses =\n  'ald-tooltip-overlay tw-z-50 tw-min-h-[28px] tw-rounded-r-50 tw-px-2 tw-py-1.5 tw-text-xs tw-leading-4 tw-bg-[var(--alias-colors-bg-skeleton-inverse-subtler)] tw-text-[var(--alias-colors-text-inverse-strong)] tw-animate-in tw-fade-in-0 tw-zoom-in-95';\n\nfunction usePortalContainer(\n  getPopupContainer?: (node: HTMLElement) => HTMLElement,\n  getTooltipContainer?: (node: HTMLElement) => HTMLElement,\n) {\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  const [container, setContainer] = React.useState<HTMLElement | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const getter = getPopupContainer || getTooltipContainer;\n    if (getter && triggerRef.current) {\n      setContainer(getter(triggerRef.current));\n    }\n  }, [getPopupContainer, getTooltipContainer]);\n\n  return { triggerRef, container };\n}\n\nfunction ClickTooltip({\n  children,\n  title,\n  open,\n  onOpenChange,\n  placement = 'top',\n  overlayClassName,\n  zIndex,\n  container,\n  triggerRef,\n}: Pick<\n  ITooltipProps,\n  | 'children'\n  | 'title'\n  | 'open'\n  | 'onOpenChange'\n  | 'placement'\n  | 'overlayClassName'\n  | 'zIndex'\n> & {\n  container?: HTMLElement;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}) {\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n\n  return (\n    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <PopoverPrimitive.Trigger asChild>\n        {React.isValidElement(children) ? (\n          React.cloneElement(children as React.ReactElement, {\n            ref: triggerRef,\n          })\n        ) : (\n          <span ref={triggerRef as React.RefObject<HTMLSpanElement>}>\n            {children}\n          </span>\n        )}\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal container={container}>\n        <PopoverPrimitive.Content\n          side={side}\n          align={align}\n          sideOffset={4}\n          className={cn(contentClasses, overlayClassName)}\n          style={{ zIndex }}\n        >\n          {title}\n          <PopoverPrimitive.Arrow className=\"tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]\" />\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport default function Tooltip(props: ITooltipProps) {\n  const {\n    children,\n    title,\n    open,\n    onOpenChange,\n    placement = 'top',\n    mouseEnterDelay = 0,\n    mouseLeaveDelay = 0,\n    overlayClassName,\n    trigger,\n    getPopupContainer,\n    getTooltipContainer,\n    zIndex,\n  } = props;\n\n  const { triggerRef, container } = usePortalContainer(\n    getPopupContainer,\n    getTooltipContainer,\n  );\n  const resolvedZIndex = useFloatingPopupZIndex(zIndex);\n\n  if (!title && title !== 0) {\n    return <>{children}</>;\n  }\n\n  if (isTriggerDisabled(trigger)) {\n    return <>{children}</>;\n  }\n\n  if (isClickTrigger(trigger)) {\n    return (\n      <ClickTooltip\n        title={title}\n        open={open}\n        onOpenChange={onOpenChange}\n        placement={placement}\n        overlayClassName={overlayClassName}\n        zIndex={resolvedZIndex}\n        container={container}\n        triggerRef={triggerRef}\n      >\n        {children}\n      </ClickTooltip>\n    );\n  }\n\n  const side = sideMap[placement] || 'top';\n  const align = alignMap[placement] || 'center';\n\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={mouseEnterDelay * 1000}\n      skipDelayDuration={mouseLeaveDelay * 1000}\n    >\n      <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>\n          {React.isValidElement(children) ? (\n            React.cloneElement(children as React.ReactElement, {\n              ref: triggerRef,\n            })\n          ) : (\n            <span ref={triggerRef as React.RefObject<HTMLSpanElement>}>\n              {children}\n            </span>\n          )}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            side={side}\n            align={align}\n            sideOffset={4}\n            className={cn(contentClasses, overlayClassName)}\n            style={{ zIndex: resolvedZIndex }}\n          >\n            {title}\n            <TooltipPrimitive.Arrow className=\"tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]\" />\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":"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"}

package/dist/Tour/index.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import Button_default from "../Button/index.js";
+import { FloatingLayerProvider, useFloatingLayer } from "../_utils/floatingLayer.js";
 import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Tour/index.tsx
@@ -10,6 +11,7 @@ function Tour(props) {
 	useEffect(() => {
 		if (!open) setInnerCurrent(0);
 	}, [open]);
+	const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer();
 	if (!open || steps.length === 0) return null;
 	const step = steps[current];
 	const isLast = current === steps.length - 1;
@@ -30,47 +32,55 @@ function Tour(props) {
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [mask && /* @__PURE__ */ jsx("div", {
 		className: "ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-black/45",
+		style: { zIndex: maskZIndex },
 		onClick: onClose
-	}), /* @__PURE__ */ jsxs("div", {
+	}), /* @__PURE__ */ jsx("div", {
 		className: cn("ald-tour tw-fixed tw-z-[1001] tw-max-w-sm tw-rounded-r-100 tw-bg-[var(--background-default)] tw-p-6 tw-shadow-xl", "tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2", className),
-		children: [
-			step?.cover && /* @__PURE__ */ jsx("div", {
-				className: "ald-tour-cover tw-mb-4",
-				children: step.cover
-			}),
-			step?.title && /* @__PURE__ */ jsx("div", {
-				className: "ald-tour-title tw-mb-2 tw-text-base tw-font-semibold tw-text-[var(--content-primary)]",
-				children: step.title
-			}),
-			step?.description && /* @__PURE__ */ jsx("div", {
-				className: "ald-tour-description tw-mb-4 tw-text-sm tw-text-[var(--content-secondary)]",
-				children: step.description
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "ald-tour-footer tw-flex tw-items-center tw-justify-between",
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "tw-text-xs tw-text-[var(--content-tertiary)]",
-					children: [
-						current + 1,
-						"/",
-						steps.length
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "tw-flex tw-gap-2",
-					children: [current > 0 && /* @__PURE__ */ jsx(Button_default, {
-						type: "secondary",
-						size: "small",
-						onClick: goPrev,
-						children: step?.prevButtonProps?.children || "Prev"
-					}), /* @__PURE__ */ jsx(Button_default, {
-						type: "primary",
-						size: "small",
-						onClick: goNext,
-						children: step?.nextButtonProps?.children || (isLast ? "Finish" : "Next")
+		style: {
+			zIndex: contentZIndex,
+			...step?.style
+		},
+		children: /* @__PURE__ */ jsxs(FloatingLayerProvider, {
+			value: nextLevel,
+			children: [
+				step?.cover && /* @__PURE__ */ jsx("div", {
+					className: "ald-tour-cover tw-mb-4",
+					children: step.cover
+				}),
+				step?.title && /* @__PURE__ */ jsx("div", {
+					className: "ald-tour-title tw-mb-2 tw-text-base tw-font-semibold tw-text-[var(--content-primary)]",
+					children: step.title
+				}),
+				step?.description && /* @__PURE__ */ jsx("div", {
+					className: "ald-tour-description tw-mb-4 tw-text-sm tw-text-[var(--content-secondary)]",
+					children: step.description
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ald-tour-footer tw-flex tw-items-center tw-justify-between",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "tw-text-xs tw-text-[var(--content-tertiary)]",
+						children: [
+							current + 1,
+							"/",
+							steps.length
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "tw-flex tw-gap-2",
+						children: [current > 0 && /* @__PURE__ */ jsx(Button_default, {
+							type: "secondary",
+							size: "small",
+							onClick: goPrev,
+							children: step?.prevButtonProps?.children || "Prev"
+						}), /* @__PURE__ */ jsx(Button_default, {
+							type: "primary",
+							size: "small",
+							onClick: goNext,
+							children: step?.nextButtonProps?.children || (isLast ? "Finish" : "Next")
+						})]
 					})]
-				})]
-			})
-		]
+				})
+			]
+		})
 	})] });
 }
 //#endregion

package/dist/Tour/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tour/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Button from '../Button';\nimport { cn } from '../lib/utils';\n\nexport interface TourStepProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  cover?: React.ReactNode;\n  target?: (() => HTMLElement | null) | null;\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight';\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  nextButtonProps?: { children?: React.ReactNode };\n  prevButtonProps?: { children?: React.ReactNode };\n}\n\nexport interface TourProps {\n  open?: boolean;\n  onClose?: () => void;\n  steps?: TourStepProps[];\n  current?: number;\n  onChange?: (current: number) => void;\n  mask?: boolean;\n  type?: 'default' | 'primary';\n  className?: string;\n  onFinish?: () => void;\n}\n\nfunction Tour(props: TourProps) {\n  const {\n    open = false,\n    onClose,\n    steps = [],\n    current: controlledCurrent,\n    onChange,\n    mask = true,\n    className,\n    onFinish,\n  } = props;\n\n  const [innerCurrent, setInnerCurrent] = useState(0);\n  const current = controlledCurrent ?? innerCurrent;\n\n  useEffect(() => {\n    if (!open) setInnerCurrent(0);\n  }, [open]);\n\n  if (!open || steps.length === 0) return null;\n\n  const step = steps[current];\n  const isLast = current === steps.length - 1;\n\n  const goNext = () => {\n    if (isLast) {\n      onFinish?.();\n      onClose?.();\n    } else {\n      const next = current + 1;\n      if (controlledCurrent === undefined) setInnerCurrent(next);\n      onChange?.(next);\n    }\n  };\n\n  const goPrev = () => {\n    const prev = Math.max(0, current - 1);\n    if (controlledCurrent === undefined) setInnerCurrent(prev);\n    onChange?.(prev);\n  };\n\n  return (\n    <>\n      {mask && (\n        <div\n          className=\"ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-black/45\"\n          onClick={onClose}\n        />\n      )}\n      <div\n        className={cn(\n          'ald-tour tw-fixed tw-z-[1001] tw-max-w-sm tw-rounded-r-100 tw-bg-[var(--background-default)] tw-p-6 tw-shadow-xl',\n          'tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n      >\n        {step?.cover && (\n          <div className=\"ald-tour-cover tw-mb-4\">{step.cover}</div>\n        )}\n        {step?.title && (\n          <div className=\"ald-tour-title tw-mb-2 tw-text-base tw-font-semibold tw-text-[var(--content-primary)]\">\n            {step.title}\n          </div>\n        )}\n        {step?.description && (\n          <div className=\"ald-tour-description tw-mb-4 tw-text-sm tw-text-[var(--content-secondary)]\">\n            {step.description}\n          </div>\n        )}\n        <div className=\"ald-tour-footer tw-flex tw-items-center tw-justify-between\">\n          <span className=\"tw-text-xs tw-text-[var(--content-tertiary)]\">\n            {current + 1}/{steps.length}\n          </span>\n          <div className=\"tw-flex tw-gap-2\">\n            {current > 0 && (\n              <Button type=\"secondary\" size=\"small\" onClick={goPrev}>\n                {step?.prevButtonProps?.children || 'Prev'}\n              </Button>\n            )}\n            <Button type=\"primary\" size=\"small\" onClick={goNext}>\n              {step?.nextButtonProps?.children || (isLast ? 'Finish' : 'Next')}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport default Tour;\n"],"mappings":";;;;;AAqCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OAAO,OACP,SACA,QAAQ,EAAE,EACV,SAAS,mBACT,UACA,OAAO,MACP,WACA,aACE;CAEJ,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,UAAU,qBAAqB;AAErC,iBAAgB;AACd,MAAI,CAAC,KAAM,iBAAgB,EAAE;IAC5B,CAAC,KAAK,CAAC;AAEV,KAAI,CAAC,QAAQ,MAAM,WAAW,EAAG,QAAO;CAExC,MAAM,OAAO,MAAM;CACnB,MAAM,SAAS,YAAY,MAAM,SAAS;CAE1C,MAAM,eAAe;AACnB,MAAI,QAAQ;AACV,eAAY;AACZ,cAAW;SACN;GACL,MAAM,OAAO,UAAU;AACvB,OAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,cAAW,KAAK;;;CAIpB,MAAM,eAAe;EACnB,MAAM,OAAO,KAAK,IAAI,GAAG,UAAU,EAAE;AACrC,MAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,aAAW,KAAK;;AAGlB,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,CAAA,EAEJ,qBAAC,OAAD;EACE,WAAW,GACT,oHACA,kEACA,UACD;YALH;GAOG,MAAM,SACL,oBAAC,OAAD;IAAK,WAAU;cAA0B,KAAK;IAAY,CAAA;GAE3D,MAAM,SACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK;IACF,CAAA;GAEP,MAAM,eACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK;IACF,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,UAAU;MAAE;MAAE,MAAM;MAChB;QACP,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,UAAU,KACT,oBAAC,gBAAD;MAAQ,MAAK;MAAY,MAAK;MAAQ,SAAS;gBAC5C,MAAM,iBAAiB,YAAY;MAC7B,CAAA,EAEX,oBAAC,gBAAD;MAAQ,MAAK;MAAU,MAAK;MAAQ,SAAS;gBAC1C,MAAM,iBAAiB,aAAa,SAAS,WAAW;MAClD,CAAA,CACL;OACF;;GACF;IACL,EAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tour/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Button from '../Button';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface TourStepProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  cover?: React.ReactNode;\n  target?: (() => HTMLElement | null) | null;\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight';\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  nextButtonProps?: { children?: React.ReactNode };\n  prevButtonProps?: { children?: React.ReactNode };\n}\n\nexport interface TourProps {\n  open?: boolean;\n  onClose?: () => void;\n  steps?: TourStepProps[];\n  current?: number;\n  onChange?: (current: number) => void;\n  mask?: boolean;\n  type?: 'default' | 'primary';\n  className?: string;\n  onFinish?: () => void;\n}\n\nfunction Tour(props: TourProps) {\n  const {\n    open = false,\n    onClose,\n    steps = [],\n    current: controlledCurrent,\n    onChange,\n    mask = true,\n    className,\n    onFinish,\n  } = props;\n\n  const [innerCurrent, setInnerCurrent] = useState(0);\n  const current = controlledCurrent ?? innerCurrent;\n\n  useEffect(() => {\n    if (!open) setInnerCurrent(0);\n  }, [open]);\n\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer();\n\n  if (!open || steps.length === 0) return null;\n\n  const step = steps[current];\n  const isLast = current === steps.length - 1;\n\n  const goNext = () => {\n    if (isLast) {\n      onFinish?.();\n      onClose?.();\n    } else {\n      const next = current + 1;\n      if (controlledCurrent === undefined) setInnerCurrent(next);\n      onChange?.(next);\n    }\n  };\n\n  const goPrev = () => {\n    const prev = Math.max(0, current - 1);\n    if (controlledCurrent === undefined) setInnerCurrent(prev);\n    onChange?.(prev);\n  };\n\n  return (\n    <>\n      {mask && (\n        <div\n          className=\"ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-black/45\"\n          style={{ zIndex: maskZIndex }}\n          onClick={onClose}\n        />\n      )}\n      <div\n        className={cn(\n          'ald-tour tw-fixed tw-z-[1001] tw-max-w-sm tw-rounded-r-100 tw-bg-[var(--background-default)] tw-p-6 tw-shadow-xl',\n          'tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n        style={{ zIndex: contentZIndex, ...step?.style }}\n      >\n        <FloatingLayerProvider value={nextLevel}>\n          {step?.cover && (\n            <div className=\"ald-tour-cover tw-mb-4\">{step.cover}</div>\n          )}\n          {step?.title && (\n            <div className=\"ald-tour-title tw-mb-2 tw-text-base tw-font-semibold tw-text-[var(--content-primary)]\">\n              {step.title}\n            </div>\n          )}\n          {step?.description && (\n            <div className=\"ald-tour-description tw-mb-4 tw-text-sm tw-text-[var(--content-secondary)]\">\n              {step.description}\n            </div>\n          )}\n          <div className=\"ald-tour-footer tw-flex tw-items-center tw-justify-between\">\n            <span className=\"tw-text-xs tw-text-[var(--content-tertiary)]\">\n              {current + 1}/{steps.length}\n            </span>\n            <div className=\"tw-flex tw-gap-2\">\n              {current > 0 && (\n                <Button type=\"secondary\" size=\"small\" onClick={goPrev}>\n                  {step?.prevButtonProps?.children || 'Prev'}\n                </Button>\n              )}\n              <Button type=\"primary\" size=\"small\" onClick={goNext}>\n                {step?.nextButtonProps?.children ||\n                  (isLast ? 'Finish' : 'Next')}\n              </Button>\n            </div>\n          </div>\n        </FloatingLayerProvider>\n      </div>\n    </>\n  );\n}\n\nexport default Tour;\n"],"mappings":";;;;;;AAyCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OAAO,OACP,SACA,QAAQ,EAAE,EACV,SAAS,mBACT,UACA,OAAO,MACP,WACA,aACE;CAEJ,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,UAAU,qBAAqB;AAErC,iBAAgB;AACd,MAAI,CAAC,KAAM,iBAAgB,EAAE;IAC5B,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,YAAY,eAAe,cAAc,kBAAkB;AAEnE,KAAI,CAAC,QAAQ,MAAM,WAAW,EAAG,QAAO;CAExC,MAAM,OAAO,MAAM;CACnB,MAAM,SAAS,YAAY,MAAM,SAAS;CAE1C,MAAM,eAAe;AACnB,MAAI,QAAQ;AACV,eAAY;AACZ,cAAW;SACN;GACL,MAAM,OAAO,UAAU;AACvB,OAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,cAAW,KAAK;;;CAIpB,MAAM,eAAe;EACnB,MAAM,OAAO,KAAK,IAAI,GAAG,UAAU,EAAE;AACrC,MAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,aAAW,KAAK;;AAGlB,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,QAAQ,YAAY;EAC7B,SAAS;EACT,CAAA,EAEJ,oBAAC,OAAD;EACE,WAAW,GACT,oHACA,kEACA,UACD;EACD,OAAO;GAAE,QAAQ;GAAe,GAAG,MAAM;GAAO;YAEhD,qBAAC,uBAAD;GAAuB,OAAO;aAA9B;IACG,MAAM,SACL,oBAAC,OAAD;KAAK,WAAU;eAA0B,KAAK;KAAY,CAAA;IAE3D,MAAM,SACL,oBAAC,OAAD;KAAK,WAAU;eACZ,KAAK;KACF,CAAA;IAEP,MAAM,eACL,oBAAC,OAAD;KAAK,WAAU;eACZ,KAAK;KACF,CAAA;IAER,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,UAAU;OAAE;OAAE,MAAM;OAChB;SACP,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,UAAU,KACT,oBAAC,gBAAD;OAAQ,MAAK;OAAY,MAAK;OAAQ,SAAS;iBAC5C,MAAM,iBAAiB,YAAY;OAC7B,CAAA,EAEX,oBAAC,gBAAD;OAAQ,MAAK;OAAU,MAAK;OAAQ,SAAS;iBAC1C,MAAM,iBAAiB,aACrB,SAAS,WAAW;OAChB,CAAA,CACL;QACF;;IACgB;;EACpB,CAAA,CACL,EAAA,CAAA"}

package/dist/_utils/SimpleOverflow.js

@@ -10,6 +10,7 @@ function SimpleOverflow(props) {
 		const container = containerRef.current;
 		if (!container) return;
 		const measure = () => {
+			if (!container.offsetWidth) return;
 			const overflowItems = [];
 			for (const child of Array.from(container.children)) if (child.dataset.overflowItem === "true") overflowItems.push(child);
 			if (overflowItems.length === 0) return;
@@ -19,15 +20,20 @@ function SimpleOverflow(props) {
 			});
 			container.offsetHeight;
 			const containerRect = container.getBoundingClientRect();
-			let count = 0;
-			for (const el of overflowItems) if (el.getBoundingClientRect().right <= containerRect.right - 40) count++;
-			else break;
+			const allFit = container.scrollWidth <= container.clientWidth + 1;
+			let newCount;
+			if (allFit) newCount = data.length;
+			else {
+				let count = 0;
+				for (const el of overflowItems) if (el.getBoundingClientRect().right <= containerRect.right - 40) count++;
+				else break;
+				newCount = Math.min(count, data.length);
+			}
 			overflowItems.forEach((el, i) => {
 				el.style.display = savedDisplays[i];
 			});
-			const newCount = Math.max(1, Math.min(count, data.length));
 			setVisibleCount(newCount);
-			onVisibleChange?.(newCount);
+			onVisibleChange?.(newCount === 0 ? -1 : newCount);
 		};
 		measure();
 		const ro = new window.ResizeObserver(measure);

package/dist/_utils/SimpleOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleOverflow.js","names":[],"sources":["../../src/_utils/SimpleOverflow.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SimpleOverflowProps<T> {\n  data: T[];\n  renderItem: (item: T, index: number) => React.ReactNode;\n  renderRest?: (omittedItems: T[]) => React.ReactNode;\n  suffix?: React.ReactNode;\n  itemKey?: string | ((item: T) => string);\n  maxCount?: 'responsive' | number;\n  className?: string;\n  prefixCls?: string;\n  onVisibleChange?: (visibleCount: number) => void;\n}\n\nexport default function SimpleOverflow<T>(props: SimpleOverflowProps<T>) {\n  const {\n    data,\n    renderItem,\n    renderRest,\n    suffix,\n    itemKey,\n    className,\n    prefixCls,\n    onVisibleChange,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const measure = () => {\n      const overflowItems: HTMLElement[] = [];\n      for (const child of Array.from(container.children)) {\n        if ((child as HTMLElement).dataset.overflowItem === 'true') {\n          overflowItems.push(child as HTMLElement);\n        }\n      }\n      if (overflowItems.length === 0) return;\n\n      // Temporarily show all items so we can measure their natural positions\n      const savedDisplays = overflowItems.map((el) => el.style.display);\n      overflowItems.forEach((el) => {\n        el.style.display = '';\n      });\n      // Force synchronous reflow\n      void container.offsetHeight;\n\n      const containerRect = container.getBoundingClientRect();\n      let count = 0;\n      for (const el of overflowItems) {\n        const rect = el.getBoundingClientRect();\n        if (rect.right <= containerRect.right - 40) {\n          count++;\n        } else {\n          break;\n        }\n      }\n\n      // Restore display values before React re-renders\n      overflowItems.forEach((el, i) => {\n        el.style.display = savedDisplays[i];\n      });\n\n      const newCount = Math.max(1, Math.min(count, data.length));\n      setVisibleCount(newCount);\n      onVisibleChange?.(newCount);\n    };\n\n    measure();\n    const ro = new window.ResizeObserver(measure);\n    ro.observe(container);\n    return () => ro.disconnect();\n  }, [data.length, onVisibleChange]);\n\n  const getKey = (item: T, index: number) => {\n    if (typeof itemKey === 'function') return itemKey(item);\n    if (typeof itemKey === 'string')\n      return (item as Record<string, string>)[itemKey];\n    return String(index);\n  };\n\n  const omittedItems = data.slice(visibleCount);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        prefixCls,\n        'tw-flex tw-flex-nowrap tw-items-center tw-overflow-hidden',\n        className,\n      )}\n    >\n      {data.map((item, index) => (\n        <div\n          key={getKey(item, index)}\n          data-overflow-item=\"true\"\n          className={prefixCls ? `${prefixCls}-item` : undefined}\n          style={{\n            display: index < visibleCount ? undefined : 'none',\n          }}\n        >\n          {renderItem(item, index)}\n        </div>\n      ))}\n      {omittedItems.length > 0 && renderRest?.(omittedItems)}\n      {suffix}\n    </div>\n  );\n}\n"],"mappings":";;;;AAeA,SAAwB,eAAkB,OAA+B;CACvE,MAAM,EACJ,MACA,YACA,YACA,QACA,SACA,WACA,WACA,oBACE;CAEJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK,OAAO;AAE7D,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,gBAAgB;GACpB,MAAM,gBAA+B,EAAE;AACvC,QAAK,MAAM,SAAS,MAAM,KAAK,UAAU,SAAS,CAChD,KAAK,MAAsB,QAAQ,iBAAiB,OAClD,eAAc,KAAK,MAAqB;AAG5C,OAAI,cAAc,WAAW,EAAG;GAGhC,MAAM,gBAAgB,cAAc,KAAK,OAAO,GAAG,MAAM,QAAQ;AACjE,iBAAc,SAAS,OAAO;AAC5B,OAAG,MAAM,UAAU;KACnB;AAEF,GAAK,UAAU;GAEf,MAAM,gBAAgB,UAAU,uBAAuB;GACvD,IAAI,QAAQ;AACZ,QAAK,MAAM,MAAM,cAEf,KADa,GAAG,uBAAuB,CAC9B,SAAS,cAAc,QAAQ,GACtC;OAEA;AAKJ,iBAAc,SAAS,IAAI,MAAM;AAC/B,OAAG,MAAM,UAAU,cAAc;KACjC;GAEF,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,KAAK,OAAO,CAAC;AAC1D,mBAAgB,SAAS;AACzB,qBAAkB,SAAS;;AAG7B,WAAS;EACT,MAAM,KAAK,IAAI,OAAO,eAAe,QAAQ;AAC7C,KAAG,QAAQ,UAAU;AACrB,eAAa,GAAG,YAAY;IAC3B,CAAC,KAAK,QAAQ,gBAAgB,CAAC;CAElC,MAAM,UAAU,MAAS,UAAkB;AACzC,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,OAAO,YAAY,SACrB,QAAQ,KAAgC;AAC1C,SAAO,OAAO,MAAM;;CAGtB,MAAM,eAAe,KAAK,MAAM,aAAa;AAE7C,QACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,WACA,6DACA,UACD;YANH;GAQG,KAAK,KAAK,MAAM,UACf,oBAAC,OAAD;IAEE,sBAAmB;IACnB,WAAW,YAAY,GAAG,UAAU,SAAS;IAC7C,OAAO,EACL,SAAS,QAAQ,eAAe,SAAY,QAC7C;cAEA,WAAW,MAAM,MAAM;IACpB,EARC,OAAO,MAAM,MAAM,CAQpB,CACN;GACD,aAAa,SAAS,KAAK,aAAa,aAAa;GACrD;GACG"}
+{"version":3,"file":"SimpleOverflow.js","names":[],"sources":["../../src/_utils/SimpleOverflow.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { cn } from '../lib/utils';\n\ninterface SimpleOverflowProps<T> {\n  data: T[];\n  renderItem: (item: T, index: number) => React.ReactNode;\n  renderRest?: (omittedItems: T[]) => React.ReactNode;\n  suffix?: React.ReactNode;\n  itemKey?: string | ((item: T) => string);\n  maxCount?: 'responsive' | number;\n  className?: string;\n  prefixCls?: string;\n  onVisibleChange?: (visibleCount: number) => void;\n}\n\nexport default function SimpleOverflow<T>(props: SimpleOverflowProps<T>) {\n  const {\n    data,\n    renderItem,\n    renderRest,\n    suffix,\n    itemKey,\n    className,\n    prefixCls,\n    onVisibleChange,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const measure = () => {\n      // 容器隐藏时跳过测量（-1 降级路径会把容器置 display:none）：\n      // 0 尺寸会被误判为 allFit，与 -1 状态互相翻转形成 setState 死循环\n      if (!container.offsetWidth) return;\n      const overflowItems: HTMLElement[] = [];\n      for (const child of Array.from(container.children)) {\n        if ((child as HTMLElement).dataset.overflowItem === 'true') {\n          overflowItems.push(child as HTMLElement);\n        }\n      }\n      if (overflowItems.length === 0) return;\n\n      // Temporarily show all items so we can measure their natural positions\n      const savedDisplays = overflowItems.map((el) => el.style.display);\n      overflowItems.forEach((el) => {\n        el.style.display = '';\n      });\n      // Force synchronous reflow\n      void container.offsetHeight;\n\n      const containerRect = container.getBoundingClientRect();\n      // 容器无横向溢出 → 全部显示，不做 +N 预留。\n      // width:auto 的 Select 容器恰好包住内容（右侧余量 0），按固定预留量判定会把\n      // 放得下的 tag 误判为放不下，导致被 overflow:hidden 裁掉右侧\n      const allFit = container.scrollWidth <= container.clientWidth + 1;\n      let newCount: number;\n      if (allFit) {\n        newCount = data.length;\n      } else {\n        let count = 0;\n        for (const el of overflowItems) {\n          const rect = el.getBoundingClientRect();\n          // 40px 预留给 \"+N\" 计数节点\n          if (rect.right <= containerRect.right - 40) {\n            count++;\n          } else {\n            break;\n          }\n        }\n        newCount = Math.min(count, data.length);\n      }\n\n      // Restore display values before React re-renders\n      overflowItems.forEach((el, i) => {\n        el.style.display = savedDisplays[i];\n      });\n\n      setVisibleCount(newCount);\n      // 一个都放不下时上报 -1，触发消费方（MultipleSelector）的\n      // overflow-item-first 降级路径：首个 tag 可收缩 + 文本省略，保住关闭按钮\n      onVisibleChange?.(newCount === 0 ? -1 : newCount);\n    };\n\n    measure();\n    const ro = new window.ResizeObserver(measure);\n    ro.observe(container);\n    return () => ro.disconnect();\n  }, [data.length, onVisibleChange]);\n\n  const getKey = (item: T, index: number) => {\n    if (typeof itemKey === 'function') return itemKey(item);\n    if (typeof itemKey === 'string')\n      return (item as Record<string, string>)[itemKey];\n    return String(index);\n  };\n\n  const omittedItems = data.slice(visibleCount);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        prefixCls,\n        'tw-flex tw-flex-nowrap tw-items-center tw-overflow-hidden',\n        className,\n      )}\n    >\n      {data.map((item, index) => (\n        <div\n          key={getKey(item, index)}\n          data-overflow-item=\"true\"\n          className={prefixCls ? `${prefixCls}-item` : undefined}\n          style={{\n            display: index < visibleCount ? undefined : 'none',\n          }}\n        >\n          {renderItem(item, index)}\n        </div>\n      ))}\n      {omittedItems.length > 0 && renderRest?.(omittedItems)}\n      {suffix}\n    </div>\n  );\n}\n"],"mappings":";;;;AAeA,SAAwB,eAAkB,OAA+B;CACvE,MAAM,EACJ,MACA,YACA,YACA,QACA,SACA,WACA,WACA,oBACE;CAEJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK,OAAO;AAE7D,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,gBAAgB;AAGpB,OAAI,CAAC,UAAU,YAAa;GAC5B,MAAM,gBAA+B,EAAE;AACvC,QAAK,MAAM,SAAS,MAAM,KAAK,UAAU,SAAS,CAChD,KAAK,MAAsB,QAAQ,iBAAiB,OAClD,eAAc,KAAK,MAAqB;AAG5C,OAAI,cAAc,WAAW,EAAG;GAGhC,MAAM,gBAAgB,cAAc,KAAK,OAAO,GAAG,MAAM,QAAQ;AACjE,iBAAc,SAAS,OAAO;AAC5B,OAAG,MAAM,UAAU;KACnB;AAEF,GAAK,UAAU;GAEf,MAAM,gBAAgB,UAAU,uBAAuB;GAIvD,MAAM,SAAS,UAAU,eAAe,UAAU,cAAc;GAChE,IAAI;AACJ,OAAI,OACF,YAAW,KAAK;QACX;IACL,IAAI,QAAQ;AACZ,SAAK,MAAM,MAAM,cAGf,KAFa,GAAG,uBAAuB,CAE9B,SAAS,cAAc,QAAQ,GACtC;QAEA;AAGJ,eAAW,KAAK,IAAI,OAAO,KAAK,OAAO;;AAIzC,iBAAc,SAAS,IAAI,MAAM;AAC/B,OAAG,MAAM,UAAU,cAAc;KACjC;AAEF,mBAAgB,SAAS;AAGzB,qBAAkB,aAAa,IAAI,KAAK,SAAS;;AAGnD,WAAS;EACT,MAAM,KAAK,IAAI,OAAO,eAAe,QAAQ;AAC7C,KAAG,QAAQ,UAAU;AACrB,eAAa,GAAG,YAAY;IAC3B,CAAC,KAAK,QAAQ,gBAAgB,CAAC;CAElC,MAAM,UAAU,MAAS,UAAkB;AACzC,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,OAAO,YAAY,SACrB,QAAQ,KAAgC;AAC1C,SAAO,OAAO,MAAM;;CAGtB,MAAM,eAAe,KAAK,MAAM,aAAa;AAE7C,QACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,WACA,6DACA,UACD;YANH;GAQG,KAAK,KAAK,MAAM,UACf,oBAAC,OAAD;IAEE,sBAAmB;IACnB,WAAW,YAAY,GAAG,UAAU,SAAS;IAC7C,OAAO,EACL,SAAS,QAAQ,eAAe,SAAY,QAC7C;cAEA,WAAW,MAAM,MAAM;IACpB,EARC,OAAO,MAAM,MAAM,CAQpB,CACN;GACD,aAAa,SAAS,KAAK,aAAa,aAAa;GACrD;GACG"}

package/dist/_utils/floatingLayer.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export declare const FLOATING_LAYER_BASE_Z_INDEX = 1000;
+export declare const FLOATING_LAYER_STEP = 10;
+export declare function useFloatingLayer(baseZIndex?: number): {
+    level: number;
+    maskZIndex: number;
+    contentZIndex: number;
+    popupZIndex: number;
+    nextLevel: number;
+};
+export declare function useFloatingPopupZIndex(zIndex?: number): number;
+export declare function FloatingLayerProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: number;
+}): import("react/jsx-runtime").JSX.Element;