@aloudata/aloudata-design 3.0.16 → 3.0.18-beta.0

package/dist/Tabs/index.js

@@ -99,7 +99,7 @@ function Tabs(props) {
 			"--tabs-padding": `${paddingVal}px`
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("ald-tabs-nav ant-tabs-nav tw-flex", isVertical ? "tw-shrink-0 tw-items-stretch" : "tw-items-center", isTop && "tw-mb-5", isBottom && "tw-mt-5", isTop && hasDividing && "tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]", isBottom && hasDividing && "tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--global-cool-grey-100)]", isTop && compact && "!tw-mb-0", isBottom && compact && "!tw-mt-0", isLeft && "tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]", isRight && "tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--global-cool-grey-100)]"),
+			className: cn("ald-tabs-nav ant-tabs-nav tw-flex", isVertical ? "tw-shrink-0 tw-items-stretch" : "tw-items-center", isTop && "tw-mb-5", isBottom && "tw-mt-5", isTop && hasDividing && "tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--border-default)]", isBottom && hasDividing && "tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--border-default)]", isTop && compact && "!tw-mb-0", isBottom && compact && "!tw-mt-0", isLeft && "tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--border-default)]", isRight && "tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--border-default)]"),
 			style: headerBackgroundColor || tabBarStyle ? {
 				...tabBarStyle,
 				...headerBackgroundColor ? { backgroundColor: headerBackgroundColor } : {}
@@ -108,7 +108,7 @@ function Tabs(props) {
 				extraLeft,
 				showScrollButtons && !isVertical && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn("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)]", !canScrollLeft && "tw-invisible"),
+					className: cn("ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-[var(--action-ghost-normal)] tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]", !canScrollLeft && "tw-invisible"),
 					onClick: () => scrollBy(-200),
 					"aria-label": "Scroll tabs left",
 					children: /* @__PURE__ */ jsx(Memo, { size: 16 })
@@ -127,7 +127,7 @@ function Tabs(props) {
 							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", isVertical && "tw-w-full tw-self-stretch", 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"),
+								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", isVertical && "tw-w-full tw-self-stretch", 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(--border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--content-brand-primary)]" : "tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-text-[var(--content-secondary)] 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(--content-brand-primary)]" : "tw-font-medium tw-text-[var(--content-secondary)] 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,
@@ -136,15 +136,15 @@ function Tabs(props) {
 										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)]",
+										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(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]",
 										onClick: (e) => handleRemove(item.key, e),
 										"aria-label": `Remove ${item.label}`,
 										children: /* @__PURE__ */ jsx(Memo$2, { size: 12 })
 									}),
-									!isCard && isActive && isTop && /* @__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 && isBottom && /* @__PURE__ */ jsx("div", { className: "ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" }),
-									!isCard && isActive && isLeft && /* @__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)]" }),
-									!isCard && isActive && isRight && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]" })
+									!isCard && isActive && isTop && /* @__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(--border-brand-strong)]" }),
+									!isCard && isActive && isBottom && /* @__PURE__ */ jsx("div", { className: "ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]" }),
+									!isCard && isActive && isLeft && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]" }),
+									!isCard && isActive && isRight && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]" })
 								]
 							}, item.key);
 						})
@@ -152,7 +152,7 @@ function Tabs(props) {
 				}),
 				showScrollButtons && !isVertical && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn("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)]", !canScrollRight && "tw-invisible"),
+					className: cn("ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-[var(--action-ghost-normal)] tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]", !canScrollRight && "tw-invisible"),
 					onClick: () => scrollBy(200),
 					"aria-label": "Scroll tabs right",
 					children: /* @__PURE__ */ jsx(Memo$1, { size: 16 })

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  tabBarStyle?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n  /** 透传到 Tabs 根容器的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到 Tabs 根容器的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\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    centered,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n    tabBarStyle,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\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 isTop = tabPosition === 'top';\n  const isBottom = tabPosition === 'bottom';\n  const isLeft = tabPosition === 'left';\n  const isRight = tabPosition === 'right';\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n  const rootDirectionClass = isRight\n    ? 'tw-flex-row-reverse'\n    : isLeft\n    ? 'tw-flex-row'\n    : isBottom\n    ? 'tw-flex-col-reverse'\n    : 'tw-flex-col';\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      data-testid={dataTestId}\n      aria-label={ariaLabel}\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        rootDirectionClass,\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',\n          isVertical ? 'tw-shrink-0 tw-items-stretch' : 'tw-items-center',\n          isTop && 'tw-mb-5',\n          isBottom && 'tw-mt-5',\n          isTop &&\n            hasDividing &&\n            'tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--global-cool-grey-100)]',\n          isBottom &&\n            hasDividing &&\n            'tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--global-cool-grey-100)]',\n          isTop && compact && '!tw-mb-0',\n          isBottom && compact && '!tw-mt-0',\n          isLeft &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--global-cool-grey-100)]',\n          isRight &&\n            'tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--global-cool-grey-100)]',\n        )}\n        style={\n          headerBackgroundColor || tabBarStyle\n            ? {\n                ...tabBarStyle,\n                ...(headerBackgroundColor\n                  ? { backgroundColor: headerBackgroundColor }\n                  : {}),\n              }\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          className={cn(\n            'ald-tabs-nav-wrap ant-tabs-nav-wrap',\n            isVertical\n              ? 'tw-w-full tw-shrink-0 tw-self-stretch'\n              : 'tw-min-w-0 tw-flex-1',\n          )}\n          style={paddingVal ? { margin: `0 ${paddingVal}px` } : undefined}\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-overflow-hidden',\n              isVertical && 'tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch',\n              centered && !isVertical && 'tw-justify-center',\n              monospace && '[&>*]:tw-flex-1',\n              isCard ? 'tw-gap-1' : !isVertical && !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                    isVertical && 'tw-w-full tw-self-stretch',\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 && isTop && (\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 && isBottom && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--alias-colors-border-selected)]\" />\n                  )}\n                  {!isCard && isActive && isLeft && (\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                  {!isCard && isActive && isRight && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--left-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        style={\n          paddingVal\n            ? { padding: `0 ${paddingVal}px ${paddingVal}px` }\n            : undefined\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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"}
+{"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  tabBarStyle?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n  /** 透传到 Tabs 根容器的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到 Tabs 根容器的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\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    centered,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n    tabBarStyle,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\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 isTop = tabPosition === 'top';\n  const isBottom = tabPosition === 'bottom';\n  const isLeft = tabPosition === 'left';\n  const isRight = tabPosition === 'right';\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n  const rootDirectionClass = isRight\n    ? 'tw-flex-row-reverse'\n    : isLeft\n    ? 'tw-flex-row'\n    : isBottom\n    ? 'tw-flex-col-reverse'\n    : 'tw-flex-col';\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      data-testid={dataTestId}\n      aria-label={ariaLabel}\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        rootDirectionClass,\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',\n          isVertical ? 'tw-shrink-0 tw-items-stretch' : 'tw-items-center',\n          isTop && 'tw-mb-5',\n          isBottom && 'tw-mt-5',\n          isTop &&\n            hasDividing &&\n            'tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--border-default)]',\n          isBottom &&\n            hasDividing &&\n            'tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--border-default)]',\n          isTop && compact && '!tw-mb-0',\n          isBottom && compact && '!tw-mt-0',\n          isLeft &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--border-default)]',\n          isRight &&\n            'tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--border-default)]',\n        )}\n        style={\n          headerBackgroundColor || tabBarStyle\n            ? {\n                ...tabBarStyle,\n                ...(headerBackgroundColor\n                  ? { backgroundColor: headerBackgroundColor }\n                  : {}),\n              }\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-[var(--action-ghost-normal)] 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          className={cn(\n            'ald-tabs-nav-wrap ant-tabs-nav-wrap',\n            isVertical\n              ? 'tw-w-full tw-shrink-0 tw-self-stretch'\n              : 'tw-min-w-0 tw-flex-1',\n          )}\n          style={paddingVal ? { margin: `0 ${paddingVal}px` } : undefined}\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-overflow-hidden',\n              isVertical && 'tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch',\n              centered && !isVertical && 'tw-justify-center',\n              monospace && '[&>*]:tw-flex-1',\n              isCard ? 'tw-gap-1' : !isVertical && !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                    isVertical && 'tw-w-full tw-self-stretch',\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(--border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--content-brand-primary)]'\n                            : 'tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-text-[var(--content-secondary)] 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(--content-brand-primary)]'\n                            : 'tw-font-medium tw-text-[var(--content-secondary)] 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(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\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 && isTop && (\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(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isBottom && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isLeft && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isRight && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\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-[var(--action-ghost-normal)] 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        style={\n          paddingVal\n            ? { padding: `0 ${paddingVal}px ${paddingVal}px` }\n            : undefined\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/Tag/index.js

@@ -11,14 +11,14 @@ function Tag(props) {
 	const bgColor = (() => {
 		if (mode === "border") return "var(--background-default)";
 		if (providedColor) {
-			if (providedIsHex) return convertHexToRGBA(providedColor, mode === "fill" ? .16 : .06);
+			if (providedIsHex) return addHexAlpha(providedColor, mode === "fill" ? .16 : .06);
 			return `color-mix(in srgb, ${providedColor} ${mode === "fill" ? 16 : 6}%, transparent)`;
 		}
 		return mode === "fill" ? tokens.bgSubtle : tokens.bgOnSubtle;
 	})();
 	const textColor = (() => {
 		if (providedColor) {
-			if (providedIsHex) return convertHexToRGBA(providedColor, 1);
+			if (providedIsHex) return addHexAlpha(providedColor, 1);
 			return providedColor;
 		}
 		return tokens.text;
@@ -26,7 +26,7 @@ function Tag(props) {
 	const borderColor = (() => {
 		if (mode === "fill") return "transparent";
 		if (providedColor) {
-			if (providedIsHex) return convertHexToRGBA(providedColor, .32);
+			if (providedIsHex) return addHexAlpha(providedColor, .32);
 			return `color-mix(in srgb, ${providedColor} 32%, transparent)`;
 		}
 		return tokens.borderSubtle;
@@ -79,9 +79,9 @@ var ALD_PREFIX = "ald-tag";
 function prefixCls(className) {
 	return `${ALD_PREFIX}-${className}`;
 }
-function convertHexToRGBA(hex, opacity) {
-	const tempHex = hex.replace("#", "");
-	return `rgba(${parseInt(tempHex.substring(0, 2), 16)},${parseInt(tempHex.substring(2, 4), 16)},${parseInt(tempHex.substring(4, 6), 16)},${opacity})`;
+function addHexAlpha(hex, opacity) {
+	const rawHex = hex.startsWith("#") ? hex.slice(1) : hex;
+	return `#${rawHex.length === 3 ? rawHex.split("").map((char) => `${char}${char}`).join("") : rawHex.slice(0, 6)}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
 }
 function isHexColor(value) {
 	return !!value && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value);
@@ -89,31 +89,31 @@ function isHexColor(value) {
 function getStatusTokens(status) {
 	switch (status) {
 		case "success": return {
-			text: "var(--alias-colors-text-success)",
+			text: "var(--content-positive-secondary)",
 			bgSubtle: "var(--background-positive-subtle)",
 			bgOnSubtle: "var(--background-positive-on-subtle)",
 			borderSubtle: "var(--border-positive-subtle)"
 		};
 		case "warning": return {
-			text: "var(--alias-colors-text-warning)",
+			text: "var(--content-warning-secondary)",
 			bgSubtle: "var(--background-warning-subtle)",
 			bgOnSubtle: "var(--background-warning-on-subtle)",
 			borderSubtle: "var(--border-warning-subtle)"
 		};
 		case "error": return {
-			text: "var(--alias-colors-text-danger)",
+			text: "var(--content-negative-secondary)",
 			bgSubtle: "var(--background-negative-subtle)",
 			bgOnSubtle: "var(--background-negative-on-subtle)",
 			borderSubtle: "var(--border-negative-subtle)"
 		};
 		case "default": return {
-			text: "var(--alias-colors-text-default)",
+			text: "var(--content-primary)",
 			bgSubtle: "var(--background-neutral-subtle)",
 			bgOnSubtle: "var(--background-neutral-on-subtle)",
 			borderSubtle: "var(--border-neutral-subtle)"
 		};
 		default: return {
-			text: "var(--alias-colors-text-information)",
+			text: "var(--content-informative-secondary)",
 			bgSubtle: "var(--background-informative-subtle)",
 			bgOnSubtle: "var(--background-informative-on-subtle)",
 			borderSubtle: "var(--border-informative-subtle)"

package/dist/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tag/index.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface TagProps {\n  children: React.ReactNode;\n  onClick?: MouseEventHandler;\n  /**\n   * 是否可关闭\n   */\n  closable?: boolean;\n  /**\n   * 关闭回调\n   */\n  onClose?: MouseEventHandler;\n  status?: 'default' | 'info' | 'success' | 'warning' | 'error';\n  /**\n   * 自定义颜色\n   */\n  color?: string;\n  /**\n   * 前置 icon 图标\n   */\n  icon?: React.ReactNode;\n  /**\n   * 后置 icon 图标\n   */\n  suffixIcon?: React.ReactNode;\n  /**\n   * 大小\n   */\n  size?: 'large' | 'default' | 'middle' | 'small';\n  /**\n   * 风格，填充、默认、线框\n   */\n  mode?: 'fill' | 'default' | 'border';\n  /**\n   * 是否禁用\n   */\n  disabled?: boolean;\n  /**\n   * 最大宽度\n   */\n  maxWidth?: number;\n  /**\n   * hover 上去后显示的 title\n   */\n  title?: string;\n  className?: string;\n}\n\nexport default function Tag(props: TagProps) {\n  const {\n    children,\n    onClick,\n    closable,\n    onClose,\n    color,\n    icon,\n    suffixIcon,\n    size = 'middle',\n    status,\n    mode,\n    disabled,\n    maxWidth,\n    className,\n    title,\n  } = props;\n  const tokens = getStatusTokens(status);\n  const providedIsHex = isHexColor(color);\n  const providedColor = color;\n\n  // background color\n  const bgColor = (() => {\n    if (mode === 'border') {\n      return 'var(--background-default)';\n    }\n    if (providedColor) {\n      if (providedIsHex)\n        return convertHexToRGBA(\n          providedColor as string,\n          mode === 'fill' ? 0.16 : 0.06,\n        );\n      return `color-mix(in srgb, ${providedColor} ${\n        mode === 'fill' ? 16 : 6\n      }%, transparent)`;\n    }\n    return mode === 'fill' ? tokens.bgSubtle : tokens.bgOnSubtle;\n  })();\n  // text color\n  const textColor = (() => {\n    if (providedColor) {\n      if (providedIsHex) return convertHexToRGBA(providedColor as string, 1);\n      return providedColor;\n    }\n    return tokens.text;\n  })();\n  // border color\n  const borderColor = (() => {\n    if (mode === 'fill') return 'transparent';\n    if (providedColor) {\n      if (providedIsHex) return convertHexToRGBA(providedColor as string, 0.32);\n      return `color-mix(in srgb, ${providedColor} 32%, transparent)`;\n    }\n    return tokens.borderSubtle;\n  })();\n\n  const onTagClick = useCallback<MouseEventHandler>(\n    (e) => {\n      if (disabled) {\n        return;\n      }\n      onClick?.(e);\n    },\n    [disabled, onClick],\n  );\n  const onCloseBtnClick = useCallback<MouseEventHandler>(\n    (e) => {\n      if (disabled) {\n        return;\n      }\n      onClose?.(e);\n    },\n    [disabled, onClose],\n  );\n\n  const DEFAULT_MAX_WIDTH = 400;\n\n  const domTitle =\n    title !== undefined ? title : typeof children === 'string' ? children : '';\n\n  return (\n    <span\n      className={cn(\n        prefixCls('container'),\n        'tw-inline-flex tw-cursor-default tw-items-center tw-overflow-hidden tw-border tw-border-solid',\n        // Size variants\n        size === 'small' &&\n          `${prefixCls(\n            'small',\n          )} tw-gap-sp-50 tw-rounded-[2px] tw-px-[3px] tw-py-px tw-text-xs tw-leading-4`,\n        size === 'large' &&\n          `${prefixCls(\n            'large',\n          )} tw-gap-sp-50 tw-rounded-[6px] tw-px-[7px] tw-py-px tw-text-base tw-leading-6`,\n        size !== 'small' &&\n          size !== 'large' &&\n          'tw-gap-sp-50 tw-rounded-r-50 tw-px-[5px] tw-py-px tw-text-sm tw-leading-5',\n        // Disabled\n        disabled && `${prefixCls('disabled')} tw-cursor-default tw-opacity-40`,\n        className || '',\n      )}\n      style={{\n        backgroundColor: bgColor,\n        color: textColor,\n        borderColor: borderColor,\n        maxWidth: maxWidth || DEFAULT_MAX_WIDTH,\n      }}\n      onClick={onTagClick}\n    >\n      {icon && (\n        <span\n          className={cn(\n            prefixCls('icon'),\n            'tw-inline-flex tw-flex-none tw-items-center',\n          )}\n        >\n          {icon}\n        </span>\n      )}\n      <span\n        className={cn(prefixCls('content'), 'tw-flex-1 tw-truncate')}\n        title={domTitle}\n      >\n        {children}\n      </span>\n      {suffixIcon && (\n        <span\n          className={cn(\n            prefixCls('suffix-icon'),\n            'tw-inline-flex tw-flex-none tw-items-center',\n          )}\n        >\n          {suffixIcon}\n        </span>\n      )}\n      {closable ? (\n        <span\n          className={cn(\n            prefixCls('close-btn'),\n            'tw-inline-flex tw-flex-none tw-items-center',\n            disabled ? 'tw-cursor-default' : 'tw-cursor-pointer',\n          )}\n          onClick={onCloseBtnClick}\n        >\n          <CloseLightLine color={textColor} size={16} />\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nconst ALD_PREFIX = 'ald-tag';\nexport function prefixCls(className: string) {\n  return `${ALD_PREFIX}-${className}`;\n}\n\nfunction convertHexToRGBA(hex: string, opacity: number) {\n  const tempHex = hex.replace('#', '');\n  const r = parseInt(tempHex.substring(0, 2), 16);\n  const g = parseInt(tempHex.substring(2, 4), 16);\n  const b = parseInt(tempHex.substring(4, 6), 16);\n\n  return `rgba(${r},${g},${b},${opacity})`;\n}\n\nfunction isHexColor(value?: string): boolean {\n  return (\n    !!value && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value)\n  );\n}\n\nfunction getStatusTokens(status?: TagProps['status']) {\n  switch (status) {\n    case 'success':\n      return {\n        text: 'var(--alias-colors-text-success)',\n        bgSubtle: 'var(--background-positive-subtle)',\n        bgOnSubtle: 'var(--background-positive-on-subtle)',\n        borderSubtle: 'var(--border-positive-subtle)',\n      } as const;\n    case 'warning':\n      return {\n        text: 'var(--alias-colors-text-warning)',\n        bgSubtle: 'var(--background-warning-subtle)',\n        bgOnSubtle: 'var(--background-warning-on-subtle)',\n        borderSubtle: 'var(--border-warning-subtle)',\n      } as const;\n    case 'error':\n      return {\n        text: 'var(--alias-colors-text-danger)',\n        bgSubtle: 'var(--background-negative-subtle)',\n        bgOnSubtle: 'var(--background-negative-on-subtle)',\n        borderSubtle: 'var(--border-negative-subtle)',\n      } as const;\n    case 'default':\n      return {\n        text: 'var(--alias-colors-text-default)',\n        bgSubtle: 'var(--background-neutral-subtle)',\n        bgOnSubtle: 'var(--background-neutral-on-subtle)',\n        borderSubtle: 'var(--border-neutral-subtle)',\n      } as const;\n    case 'info':\n    default:\n      return {\n        text: 'var(--alias-colors-text-information)',\n        bgSubtle: 'var(--background-informative-subtle)',\n        bgOnSubtle: 'var(--background-informative-on-subtle)',\n        borderSubtle: 'var(--border-informative-subtle)',\n      } as const;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tag/index.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface TagProps {\n  children: React.ReactNode;\n  onClick?: MouseEventHandler;\n  /**\n   * 是否可关闭\n   */\n  closable?: boolean;\n  /**\n   * 关闭回调\n   */\n  onClose?: MouseEventHandler;\n  status?: 'default' | 'info' | 'success' | 'warning' | 'error';\n  /**\n   * 自定义颜色\n   */\n  color?: string;\n  /**\n   * 前置 icon 图标\n   */\n  icon?: React.ReactNode;\n  /**\n   * 后置 icon 图标\n   */\n  suffixIcon?: React.ReactNode;\n  /**\n   * 大小\n   */\n  size?: 'large' | 'default' | 'middle' | 'small';\n  /**\n   * 风格，填充、默认、线框\n   */\n  mode?: 'fill' | 'default' | 'border';\n  /**\n   * 是否禁用\n   */\n  disabled?: boolean;\n  /**\n   * 最大宽度\n   */\n  maxWidth?: number;\n  /**\n   * hover 上去后显示的 title\n   */\n  title?: string;\n  className?: string;\n}\n\nexport default function Tag(props: TagProps) {\n  const {\n    children,\n    onClick,\n    closable,\n    onClose,\n    color,\n    icon,\n    suffixIcon,\n    size = 'middle',\n    status,\n    mode,\n    disabled,\n    maxWidth,\n    className,\n    title,\n  } = props;\n  const tokens = getStatusTokens(status);\n  const providedIsHex = isHexColor(color);\n  const providedColor = color;\n\n  // background color\n  const bgColor = (() => {\n    if (mode === 'border') {\n      return 'var(--background-default)';\n    }\n    if (providedColor) {\n      if (providedIsHex)\n        return addHexAlpha(\n          providedColor as string,\n          mode === 'fill' ? 0.16 : 0.06,\n        );\n      return `color-mix(in srgb, ${providedColor} ${\n        mode === 'fill' ? 16 : 6\n      }%, transparent)`;\n    }\n    return mode === 'fill' ? tokens.bgSubtle : tokens.bgOnSubtle;\n  })();\n  // text color\n  const textColor = (() => {\n    if (providedColor) {\n      if (providedIsHex) return addHexAlpha(providedColor as string, 1);\n      return providedColor;\n    }\n    return tokens.text;\n  })();\n  // border color\n  const borderColor = (() => {\n    if (mode === 'fill') return 'transparent';\n    if (providedColor) {\n      if (providedIsHex) return addHexAlpha(providedColor as string, 0.32);\n      return `color-mix(in srgb, ${providedColor} 32%, transparent)`;\n    }\n    return tokens.borderSubtle;\n  })();\n\n  const onTagClick = useCallback<MouseEventHandler>(\n    (e) => {\n      if (disabled) {\n        return;\n      }\n      onClick?.(e);\n    },\n    [disabled, onClick],\n  );\n  const onCloseBtnClick = useCallback<MouseEventHandler>(\n    (e) => {\n      if (disabled) {\n        return;\n      }\n      onClose?.(e);\n    },\n    [disabled, onClose],\n  );\n\n  const DEFAULT_MAX_WIDTH = 400;\n\n  const domTitle =\n    title !== undefined ? title : typeof children === 'string' ? children : '';\n\n  return (\n    <span\n      className={cn(\n        prefixCls('container'),\n        'tw-inline-flex tw-cursor-default tw-items-center tw-overflow-hidden tw-border tw-border-solid',\n        // Size variants\n        size === 'small' &&\n          `${prefixCls(\n            'small',\n          )} tw-gap-sp-50 tw-rounded-[2px] tw-px-[3px] tw-py-px tw-text-xs tw-leading-4`,\n        size === 'large' &&\n          `${prefixCls(\n            'large',\n          )} tw-gap-sp-50 tw-rounded-[6px] tw-px-[7px] tw-py-px tw-text-base tw-leading-6`,\n        size !== 'small' &&\n          size !== 'large' &&\n          'tw-gap-sp-50 tw-rounded-r-50 tw-px-[5px] tw-py-px tw-text-sm tw-leading-5',\n        // Disabled\n        disabled && `${prefixCls('disabled')} tw-cursor-default tw-opacity-40`,\n        className || '',\n      )}\n      style={{\n        backgroundColor: bgColor,\n        color: textColor,\n        borderColor: borderColor,\n        maxWidth: maxWidth || DEFAULT_MAX_WIDTH,\n      }}\n      onClick={onTagClick}\n    >\n      {icon && (\n        <span\n          className={cn(\n            prefixCls('icon'),\n            'tw-inline-flex tw-flex-none tw-items-center',\n          )}\n        >\n          {icon}\n        </span>\n      )}\n      <span\n        className={cn(prefixCls('content'), 'tw-flex-1 tw-truncate')}\n        title={domTitle}\n      >\n        {children}\n      </span>\n      {suffixIcon && (\n        <span\n          className={cn(\n            prefixCls('suffix-icon'),\n            'tw-inline-flex tw-flex-none tw-items-center',\n          )}\n        >\n          {suffixIcon}\n        </span>\n      )}\n      {closable ? (\n        <span\n          className={cn(\n            prefixCls('close-btn'),\n            'tw-inline-flex tw-flex-none tw-items-center',\n            disabled ? 'tw-cursor-default' : 'tw-cursor-pointer',\n          )}\n          onClick={onCloseBtnClick}\n        >\n          <CloseLightLine color={textColor} size={16} />\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nconst ALD_PREFIX = 'ald-tag';\nexport function prefixCls(className: string) {\n  return `${ALD_PREFIX}-${className}`;\n}\n\nfunction addHexAlpha(hex: string, opacity: number) {\n  const rawHex = hex.startsWith('#') ? hex.slice(1) : hex;\n  const normalizedHex =\n    rawHex.length === 3\n      ? rawHex\n          .split('')\n          .map((char) => `${char}${char}`)\n          .join('')\n      : rawHex.slice(0, 6);\n  const alpha = Math.round(opacity * 255)\n    .toString(16)\n    .padStart(2, '0');\n\n  return `#${normalizedHex}${alpha}`;\n}\n\nfunction isHexColor(value?: string): boolean {\n  return (\n    !!value && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value)\n  );\n}\n\nfunction getStatusTokens(status?: TagProps['status']) {\n  switch (status) {\n    case 'success':\n      return {\n        text: 'var(--content-positive-secondary)',\n        bgSubtle: 'var(--background-positive-subtle)',\n        bgOnSubtle: 'var(--background-positive-on-subtle)',\n        borderSubtle: 'var(--border-positive-subtle)',\n      } as const;\n    case 'warning':\n      return {\n        text: 'var(--content-warning-secondary)',\n        bgSubtle: 'var(--background-warning-subtle)',\n        bgOnSubtle: 'var(--background-warning-on-subtle)',\n        borderSubtle: 'var(--border-warning-subtle)',\n      } as const;\n    case 'error':\n      return {\n        text: 'var(--content-negative-secondary)',\n        bgSubtle: 'var(--background-negative-subtle)',\n        bgOnSubtle: 'var(--background-negative-on-subtle)',\n        borderSubtle: 'var(--border-negative-subtle)',\n      } as const;\n    case 'default':\n      return {\n        text: 'var(--content-primary)',\n        bgSubtle: 'var(--background-neutral-subtle)',\n        bgOnSubtle: 'var(--background-neutral-on-subtle)',\n        borderSubtle: 'var(--border-neutral-subtle)',\n      } as const;\n    case 'info':\n    default:\n      return {\n        text: 'var(--content-informative-secondary)',\n        bgSubtle: 'var(--background-informative-subtle)',\n        bgOnSubtle: 'var(--background-informative-on-subtle)',\n        borderSubtle: 'var(--border-informative-subtle)',\n      } as const;\n  }\n}\n"],"mappings":"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"}

package/dist/TextLink/index.js

@@ -11,8 +11,8 @@ var textLinkVariants = cva("ald-text-link tw-inline-flex tw-cursor-pointer tw-it
 			large: "ald-text-link-large tw-text-base tw-leading-6"
 		},
 		type: {
-			primary: "ald-text-link-primary tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
-			secondary: "ald-text-link-secondary tw-text-[var(--alias-colors-text-default)] hover:tw-text-[var(--alias-colors-text-selected)]"
+			primary: "ald-text-link-primary tw-text-[var(--action-primary-normal)] hover:tw-text-[var(--action-primary-hover)]",
+			secondary: "ald-text-link-secondary tw-text-[var(--content-primary)] hover:tw-text-[var(--content-brand-primary)]"
 		},
 		disabled: {
 			true: "ald-text-link-disabled tw-pointer-events-none tw-cursor-default tw-opacity-50",

package/dist/TextLink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/TextLink/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { SizeType } from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\ntype TextLinkType = 'primary' | 'secondary';\ninterface TextLinkProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'type'> {\n  className?: string;\n  /**\n   * @description 类型\n   * @type 'primary' | 'secondary'\n   * @default primary\n   */\n  type?: TextLinkType;\n  /**\n   * @description 显示下划线\n   * @type  boolean\n   * @default false\n   */\n  underline?: boolean;\n  /**\n   * @description 尺寸\n   * @type 'small' | 'middle' | 'large'| undefined\n   * @default large\n   */\n  size?: SizeType;\n  /**\n   * @description 是否禁用\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * @description 设置按钮的图标组件\n   */\n  icon?: React.ReactNode;\n  /**\n   * @description 链接地址\n   */\n  href?: string;\n  /**\n   * @description 链接打开方式\n   */\n  target?: string;\n}\n\nconst textLinkVariants = cva(\n  'ald-text-link tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1',\n  {\n    variants: {\n      size: {\n        small: 'ald-text-link-small tw-text-xs tw-leading-4',\n        middle: 'ald-text-link-middle tw-text-sm tw-leading-5',\n        large: 'ald-text-link-large tw-text-base tw-leading-6',\n      },\n      type: {\n        primary:\n          'ald-text-link-primary tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]',\n        secondary:\n          'ald-text-link-secondary tw-text-[var(--alias-colors-text-default)] hover:tw-text-[var(--alias-colors-text-selected)]',\n      },\n      disabled: {\n        true: 'ald-text-link-disabled tw-pointer-events-none tw-cursor-default tw-opacity-50',\n        false: '',\n      },\n      underline: {\n        true: 'ald-text-link-show-underline tw-font-normal hover:tw-underline active:tw-underline',\n        false: 'tw-font-medium',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n      type: 'primary',\n      disabled: false,\n      underline: false,\n    },\n  },\n);\n\nconst TextLink = React.forwardRef<HTMLSpanElement, TextLinkProps>(\n  (props, ref) => {\n    const {\n      size: propsSize,\n      type = 'primary',\n      underline,\n      disabled,\n      icon: propsIcon = null,\n      children,\n      className,\n      ...restProps\n    } = props;\n    const size = propsSize || 'middle';\n    const icon = underline ? null : propsIcon;\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          textLinkVariants({\n            size,\n            type,\n            disabled: !!disabled,\n            underline: !!underline,\n          }),\n          className,\n        )}\n        {...restProps}\n      >\n        {icon}\n        {children}\n      </span>\n    );\n  },\n);\n\nTextLink.displayName = 'TextLink';\n\nexport default TextLink;\n"],"mappings":";;;;;AA8CA,IAAM,mBAAmB,IACvB,2EACA;CACE,UAAU;EACR,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;GACR;EACD,MAAM;GACJ,SACE;GACF,WACE;GACH;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,WAAW;EACZ;CACF,CACF;AAED,IAAM,WAAW,MAAM,YACpB,OAAO,QAAQ;CACd,MAAM,EACJ,MAAM,WACN,OAAO,WACP,WACA,UACA,MAAM,YAAY,MAClB,UACA,WACA,GAAG,cACD;CACJ,MAAM,OAAO,aAAa;CAC1B,MAAM,OAAO,YAAY,OAAO;AAChC,QACE,qBAAC,QAAD;EACO;EACL,WAAW,GACT,iBAAiB;GACf;GACA;GACA,UAAU,CAAC,CAAC;GACZ,WAAW,CAAC,CAAC;GACd,CAAC,EACF,UACD;EACD,GAAI;YAXN,CAaG,MACA,SACI;;EAGZ;AAED,SAAS,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/TextLink/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { SizeType } from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\ntype TextLinkType = 'primary' | 'secondary';\ninterface TextLinkProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'type'> {\n  className?: string;\n  /**\n   * @description 类型\n   * @type 'primary' | 'secondary'\n   * @default primary\n   */\n  type?: TextLinkType;\n  /**\n   * @description 显示下划线\n   * @type  boolean\n   * @default false\n   */\n  underline?: boolean;\n  /**\n   * @description 尺寸\n   * @type 'small' | 'middle' | 'large'| undefined\n   * @default large\n   */\n  size?: SizeType;\n  /**\n   * @description 是否禁用\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * @description 设置按钮的图标组件\n   */\n  icon?: React.ReactNode;\n  /**\n   * @description 链接地址\n   */\n  href?: string;\n  /**\n   * @description 链接打开方式\n   */\n  target?: string;\n}\n\nconst textLinkVariants = cva(\n  'ald-text-link tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1',\n  {\n    variants: {\n      size: {\n        small: 'ald-text-link-small tw-text-xs tw-leading-4',\n        middle: 'ald-text-link-middle tw-text-sm tw-leading-5',\n        large: 'ald-text-link-large tw-text-base tw-leading-6',\n      },\n      type: {\n        primary:\n          'ald-text-link-primary tw-text-[var(--action-primary-normal)] hover:tw-text-[var(--action-primary-hover)]',\n        secondary:\n          'ald-text-link-secondary tw-text-[var(--content-primary)] hover:tw-text-[var(--content-brand-primary)]',\n      },\n      disabled: {\n        true: 'ald-text-link-disabled tw-pointer-events-none tw-cursor-default tw-opacity-50',\n        false: '',\n      },\n      underline: {\n        true: 'ald-text-link-show-underline tw-font-normal hover:tw-underline active:tw-underline',\n        false: 'tw-font-medium',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n      type: 'primary',\n      disabled: false,\n      underline: false,\n    },\n  },\n);\n\nconst TextLink = React.forwardRef<HTMLSpanElement, TextLinkProps>(\n  (props, ref) => {\n    const {\n      size: propsSize,\n      type = 'primary',\n      underline,\n      disabled,\n      icon: propsIcon = null,\n      children,\n      className,\n      ...restProps\n    } = props;\n    const size = propsSize || 'middle';\n    const icon = underline ? null : propsIcon;\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          textLinkVariants({\n            size,\n            type,\n            disabled: !!disabled,\n            underline: !!underline,\n          }),\n          className,\n        )}\n        {...restProps}\n      >\n        {icon}\n        {children}\n      </span>\n    );\n  },\n);\n\nTextLink.displayName = 'TextLink';\n\nexport default TextLink;\n"],"mappings":";;;;;AA8CA,IAAM,mBAAmB,IACvB,2EACA;CACE,UAAU;EACR,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;GACR;EACD,MAAM;GACJ,SACE;GACF,WACE;GACH;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,WAAW;EACZ;CACF,CACF;AAED,IAAM,WAAW,MAAM,YACpB,OAAO,QAAQ;CACd,MAAM,EACJ,MAAM,WACN,OAAO,WACP,WACA,UACA,MAAM,YAAY,MAClB,UACA,WACA,GAAG,cACD;CACJ,MAAM,OAAO,aAAa;CAC1B,MAAM,OAAO,YAAY,OAAO;AAChC,QACE,qBAAC,QAAD;EACO;EACL,WAAW,GACT,iBAAiB;GACf;GACA;GACA,UAAU,CAAC,CAAC;GACZ,WAAW,CAAC,CAAC;GACd,CAAC,EACF,UACD;EACD,GAAI;YAXN,CAaG,MACA,SACI;;EAGZ;AAED,SAAS,cAAc"}

package/dist/Tooltip/index.js

@@ -37,7 +37,7 @@ function isClickTrigger(trigger) {
 function isTriggerDisabled(trigger) {
 	return Array.isArray(trigger) && trigger.length === 0;
 }
-var contentClasses = "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";
+var contentClasses = "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(--background-inverted)] tw-text-[var(--content-inverted-primary)] tw-animate-in tw-fade-in-0 tw-zoom-in-95";
 function usePortalContainer(getPopupContainer, getTooltipContainer) {
 	const triggerRef = React.useRef(null);
 	const [container, setContainer] = React.useState(void 0);
@@ -70,7 +70,7 @@ function ClickTooltip({ children, title, open, onOpenChange, placement = "top",
 				sideOffset: 4,
 				className: cn(contentClasses, overlayClassName),
 				style: { zIndex },
-				children: [title, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]" })]
+				children: [title, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "tw-fill-[var(--background-inverted)]" })]
 			})
 		})]
 	});
@@ -115,7 +115,7 @@ function Tooltip(props) {
 					sideOffset: 4,
 					className: cn(contentClasses, overlayClassName),
 					style: { zIndex: resolvedZIndex },
-					children: [mergedTitle, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]" })]
+					children: [mergedTitle, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "tw-fill-[var(--background-inverted)]" })]
 				})
 			})]
 		})

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 { 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    content,\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  const mergedTitle = title ?? content;\n\n  if (!mergedTitle && mergedTitle !== 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={mergedTitle}\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            {mergedTitle}\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(--background-inverted)] tw-text-[var(--content-inverted-primary)] 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(--background-inverted)]\" />\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    content,\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  const mergedTitle = title ?? content;\n\n  if (!mergedTitle && mergedTitle !== 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={mergedTitle}\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            {mergedTitle}\n            <TooltipPrimitive.Arrow className=\"tw-fill-[var(--background-inverted)]\" />\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

@@ -31,7 +31,7 @@ function Tour(props) {
 		onChange?.(prev);
 	};
 	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",
+		className: "ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-[var(--background-inverted)] tw-opacity-45",
 		style: { zIndex: maskZIndex },
 		onClick: onClose
 	}), /* @__PURE__ */ jsx("div", {

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 {\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"}
+{"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-[var(--background-inverted)] tw-opacity-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/Tree/Tree2.js

@@ -68,7 +68,7 @@ var Tree = React$1.forwardRef((props, ref) => {
 		};
 		const newIcon = /* @__PURE__ */ jsx(Memo$1, {
 			size: TREE_SWITCH_CION_SIZE,
-			color: "var(--alias-colors-icon-subtle)"
+			color: "var(--content-secondary)"
 		});
 		let mergedDraggable = { icon: newIcon };
 		switch (typeof draggable) {
@@ -220,7 +220,7 @@ var Tree = React$1.forwardRef((props, ref) => {
 		switcherIcon: (nodeProps) => {
 			return /* @__PURE__ */ jsxs(Fragment, { children: [renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /* @__PURE__ */ jsx(Memo, {
 				size: TREE_SWITCH_CION_SIZE,
-				color: "var(--alias-colors-icon-subtle)",
+				color: "var(--content-secondary)",
 				children: t.Tree.expand
 			}), showLine, nodeProps, TREE_SWITCH_CION_SIZE)] });
 		},