@aloudata/aloudata-design 3.0.20 → 3.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (218) hide show
  1. package/README.md +145 -59
  2. package/dist/Alert/index.js +1 -1
  3. package/dist/Alert/index.js.map +1 -1
  4. package/dist/App/index.d.ts +3 -0
  5. package/dist/App/index.js +12 -10
  6. package/dist/App/index.js.map +1 -1
  7. package/dist/Avatar/component/Avatar/index.js +2 -2
  8. package/dist/Avatar/component/Avatar/index.js.map +1 -1
  9. package/dist/Avatar/component/Avatar/type.js +3 -3
  10. package/dist/Avatar/component/Avatar/type.js.map +1 -1
  11. package/dist/Badge/index.js +5 -5
  12. package/dist/Badge/index.js.map +1 -1
  13. package/dist/Breadcrumb/index.js +4 -4
  14. package/dist/Breadcrumb/index.js.map +1 -1
  15. package/dist/Button/index.js +8 -8
  16. package/dist/Button/index.js.map +1 -1
  17. package/dist/Card/index.js +1 -1
  18. package/dist/Card/index.js.map +1 -1
  19. package/dist/Checkbox/index.js +3 -3
  20. package/dist/Checkbox/index.js.map +1 -1
  21. package/dist/Collapse/index.js +1 -1
  22. package/dist/Collapse/index.js.map +1 -1
  23. package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js +1 -1
  24. package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js.map +1 -1
  25. package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js +1 -1
  26. package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js.map +1 -1
  27. package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js +1 -1
  28. package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js.map +1 -1
  29. package/dist/ColorPicker/ComplexColorPicker/index.js +2 -2
  30. package/dist/ColorPicker/ComplexColorPicker/index.js.map +1 -1
  31. package/dist/ColorPicker/index.js +11 -11
  32. package/dist/ColorPicker/index.js.map +1 -1
  33. package/dist/ColorPicker/util.d.ts +1 -1
  34. package/dist/ColorPicker/util.js.map +1 -1
  35. package/dist/DataPreviewTable/components/Body/Cell.js +2 -2
  36. package/dist/DataPreviewTable/components/Body/Cell.js.map +1 -1
  37. package/dist/DataPreviewTable/components/Body/index.js +1 -1
  38. package/dist/DataPreviewTable/components/Body/index.js.map +1 -1
  39. package/dist/DataPreviewTable/components/DragBar/index.js +1 -1
  40. package/dist/DataPreviewTable/components/DragBar/index.js.map +1 -1
  41. package/dist/DataPreviewTable/components/Header/index.js +3 -3
  42. package/dist/DataPreviewTable/components/Header/index.js.map +1 -1
  43. package/dist/DataPreviewTable/index.js +1 -1
  44. package/dist/DataPreviewTable/index.js.map +1 -1
  45. package/dist/Divider/index.js +1 -1
  46. package/dist/Divider/index.js.map +1 -1
  47. package/dist/Drawer/index.js +3 -3
  48. package/dist/Drawer/index.js.map +1 -1
  49. package/dist/Dropdown/index.d.ts +5 -0
  50. package/dist/Dropdown/index.js +3 -1
  51. package/dist/Dropdown/index.js.map +1 -1
  52. package/dist/Empty/image/Data.js +16 -16
  53. package/dist/Empty/image/Data.js.map +1 -1
  54. package/dist/Empty/image/User.js +16 -16
  55. package/dist/Empty/image/User.js.map +1 -1
  56. package/dist/Empty/image/WorkBook.js +17 -17
  57. package/dist/Empty/image/WorkBook.js.map +1 -1
  58. package/dist/Form/index.js +2 -2
  59. package/dist/Form/index.js.map +1 -1
  60. package/dist/Icon/components/SortAscendingOrderColor.js +1 -1
  61. package/dist/Icon/components/SortAscendingOrderColor.js.map +1 -1
  62. package/dist/Icon/components/SortDescendingOrderColor.js +1 -1
  63. package/dist/Icon/components/SortDescendingOrderColor.js.map +1 -1
  64. package/dist/Icon/components/User.js +2 -2
  65. package/dist/Icon/components/User.js.map +1 -1
  66. package/dist/Icon/components/UserGroup.js +2 -2
  67. package/dist/Icon/components/UserGroup.js.map +1 -1
  68. package/dist/Input/components/Input/index.js +3 -4
  69. package/dist/Input/components/Input/index.js.map +1 -1
  70. package/dist/Input/components/TextArea/index.js +3 -3
  71. package/dist/Input/components/TextArea/index.js.map +1 -1
  72. package/dist/InputNumber/index.js +4 -4
  73. package/dist/InputNumber/index.js.map +1 -1
  74. package/dist/LogicTree/components/LogicItem/index.js +2 -2
  75. package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
  76. package/dist/MemberPicker/components/SelectedMemberTags.js +1 -1
  77. package/dist/MemberPicker/components/SelectedMemberTags.js.map +1 -1
  78. package/dist/Modal/index.js +8 -8
  79. package/dist/Modal/index.js.map +1 -1
  80. package/dist/Popconfirm/index.js +1 -1
  81. package/dist/Popconfirm/index.js.map +1 -1
  82. package/dist/Popover/index.js +2 -2
  83. package/dist/Popover/index.js.map +1 -1
  84. package/dist/Progress/index.js +1 -1
  85. package/dist/Progress/index.js.map +1 -1
  86. package/dist/RenameInput/index.js +4 -4
  87. package/dist/RenameInput/index.js.map +1 -1
  88. package/dist/Result/index.js +4 -4
  89. package/dist/Result/index.js.map +1 -1
  90. package/dist/Select/BaseSelect.js +2 -1
  91. package/dist/Select/BaseSelect.js.map +1 -1
  92. package/dist/Select/components/Suffix.js +3 -3
  93. package/dist/Select/components/Suffix.js.map +1 -1
  94. package/dist/Slider/index.js +4 -4
  95. package/dist/Slider/index.js.map +1 -1
  96. package/dist/Spin/CustomIcon/index.js +2 -2
  97. package/dist/Spin/CustomIcon/index.js.map +1 -1
  98. package/dist/StatusLight/index.js +15 -15
  99. package/dist/StatusLight/index.js.map +1 -1
  100. package/dist/Steps/index.js +6 -6
  101. package/dist/Steps/index.js.map +1 -1
  102. package/dist/Switch/index.js +3 -3
  103. package/dist/Switch/index.js.map +1 -1
  104. package/dist/Table/components/Header.js +3 -3
  105. package/dist/Table/components/Header.js.map +1 -1
  106. package/dist/Tabs/index.js +9 -9
  107. package/dist/Tabs/index.js.map +1 -1
  108. package/dist/Tag/index.js +11 -11
  109. package/dist/Tag/index.js.map +1 -1
  110. package/dist/TextLink/index.js +2 -2
  111. package/dist/TextLink/index.js.map +1 -1
  112. package/dist/Tooltip/index.js +3 -3
  113. package/dist/Tooltip/index.js.map +1 -1
  114. package/dist/Tour/index.js +1 -1
  115. package/dist/Tour/index.js.map +1 -1
  116. package/dist/Tree/Tree2.js +2 -2
  117. package/dist/Tree/Tree2.js.map +1 -1
  118. package/dist/Typography/index.js +1 -1
  119. package/dist/Typography/index.js.map +1 -1
  120. package/dist/User/index.js +1 -1
  121. package/dist/User/index.js.map +1 -1
  122. package/dist/Watermark/index.js +2 -1
  123. package/dist/Watermark/index.js.map +1 -1
  124. package/dist/aloudata-design.css +1 -1
  125. package/dist/index.d.ts +2 -2
  126. package/dist/index.js +11 -5
  127. package/dist/message/index.js +1 -1
  128. package/dist/message/index.js.map +1 -1
  129. package/dist/notification/index.js +5 -5
  130. package/dist/notification/index.js.map +1 -1
  131. package/dist/theme/contract/baselineResolvedTokenValueManifest.d.ts +22 -0
  132. package/dist/theme/contract/darkResolvedTokenValueManifest.d.ts +5 -0
  133. package/dist/theme/contract/darkResolvedTokenValueManifest.js +2 -0
  134. package/dist/theme/contract/resolvedTokenValueManifest.d.ts +3 -0
  135. package/dist/theme/contract/resolvedTokenValueManifest.js +2 -0
  136. package/dist/theme/contract/shadowGeneratorSpecification.d.ts +37 -0
  137. package/dist/theme/contract/shadowGeneratorSpecification.js +2 -0
  138. package/dist/theme/contract/tokenCssBridge.d.ts +60 -0
  139. package/dist/theme/contract/tokenCssBridge.js +2 -0
  140. package/dist/theme/contract/tokenOutputContract.d.ts +35 -0
  141. package/dist/theme/contract/tokenOutputContract.js +198 -0
  142. package/dist/theme/contract/tokenOutputContract.js.map +1 -0
  143. package/dist/theme/generator/acceptedColorValues.d.ts +97 -0
  144. package/dist/theme/generator/acceptedColorValues.js +2 -0
  145. package/dist/theme/generator/baselineTokenValueDelivery.d.ts +21 -0
  146. package/dist/theme/generator/baselineTokenValueDelivery.js +2 -0
  147. package/dist/theme/generator/cssArtifactEmitter.d.ts +62 -0
  148. package/dist/theme/generator/cssArtifactEmitter.js +2 -0
  149. package/dist/theme/generator/generator.d.ts +41 -0
  150. package/dist/theme/generator/generator.js +2 -0
  151. package/dist/theme/generator/generatorDiff.d.ts +53 -0
  152. package/dist/theme/generator/generatorDiff.js +2 -0
  153. package/dist/theme/generator/generatorEmitter.d.ts +73 -0
  154. package/dist/theme/generator/generatorEmitter.js +2 -0
  155. package/dist/theme/generator/generatorMappingStrategy.d.ts +43 -0
  156. package/dist/theme/generator/generatorMappingStrategy.js +2 -0
  157. package/dist/theme/generator/generatorOutputSchema.d.ts +80 -0
  158. package/dist/theme/generator/generatorOutputSchema.js +2 -0
  159. package/dist/theme/generator/minimalAcceptedColorValues.d.ts +27 -0
  160. package/dist/theme/generator/minimalAcceptedColorValues.js +2 -0
  161. package/dist/theme/generator/valueResolver.d.ts +64 -0
  162. package/dist/theme/generator/valueResolver.js +2 -0
  163. package/dist/theme/governance/migrationMappingRegistry.d.ts +22 -0
  164. package/dist/theme/governance/migrationMappingRegistry.js +459 -0
  165. package/dist/theme/governance/migrationMappingRegistry.js.map +1 -0
  166. package/dist/theme/governance/reviewGate.d.ts +33 -0
  167. package/dist/theme/governance/reviewGate.js +116 -0
  168. package/dist/theme/governance/reviewGate.js.map +1 -0
  169. package/dist/theme/governance/validateMigrationMapping.d.ts +50 -0
  170. package/dist/theme/governance/validateMigrationMapping.js +157 -0
  171. package/dist/theme/governance/validateMigrationMapping.js.map +1 -0
  172. package/dist/theme/index.d.ts +16 -5
  173. package/dist/theme/index.js +10 -4
  174. package/dist/theme/runtime/colorValueMode/dark.d.ts +1 -0
  175. package/dist/theme/runtime/colorValueMode/dark.js +2 -0
  176. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.d.ts +3 -0
  177. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js +125 -0
  178. package/dist/theme/runtime/colorValueMode/generated/darkBaselineDeclarations.js.map +1 -0
  179. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.d.ts +3 -0
  180. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js +125 -0
  181. package/dist/theme/runtime/colorValueMode/generated/v3BaselineDeclarations.js.map +1 -0
  182. package/dist/theme/runtime/colorValueMode/index.d.ts +6 -0
  183. package/dist/theme/runtime/colorValueMode/index.js +55 -0
  184. package/dist/theme/runtime/colorValueMode/index.js.map +1 -0
  185. package/dist/theme/runtime/colorValueMode/registry.d.ts +38 -0
  186. package/dist/theme/runtime/colorValueMode/registry.js +46 -0
  187. package/dist/theme/runtime/colorValueMode/registry.js.map +1 -0
  188. package/dist/theme/runtime/colorValueMode/v3.d.ts +1 -0
  189. package/dist/theme/runtime/colorValueMode/v3.js +2 -0
  190. package/dist/theme/runtime/colorValueMode.d.ts +2 -0
  191. package/dist/theme/{createTheme.js → runtime/createTheme.js} +1 -1
  192. package/dist/theme/runtime/createTheme.js.map +1 -0
  193. package/dist/theme/{defaultTheme.js → runtime/defaultTheme.js} +1 -1
  194. package/dist/theme/runtime/defaultTheme.js.map +1 -0
  195. package/dist/theme/{initAldTheme.js → runtime/initAldTheme.js} +6 -1
  196. package/dist/theme/runtime/initAldTheme.js.map +1 -0
  197. package/dist/theme/runtime/integrationController.d.ts +26 -0
  198. package/dist/theme/runtime/integrationController.js +2 -0
  199. package/dist/theme/runtime/runtimeAdapter.d.ts +31 -0
  200. package/dist/theme/runtime/runtimeAdapter.js +2 -0
  201. package/dist/theme/{themeToCssVars.js → runtime/themeToCssVars.js} +1 -1
  202. package/dist/theme/runtime/themeToCssVars.js.map +1 -0
  203. package/dist/theme/{tokenMap.js → runtime/tokenMap.js} +1 -1
  204. package/dist/theme/runtime/tokenMap.js.map +1 -0
  205. package/dist/theme/runtime/types.js +2 -0
  206. package/package.json +20 -3
  207. package/dist/theme/createTheme.js.map +0 -1
  208. package/dist/theme/defaultTheme.js.map +0 -1
  209. package/dist/theme/initAldTheme.js.map +0 -1
  210. package/dist/theme/themeToCssVars.js.map +0 -1
  211. package/dist/theme/tokenMap.js.map +0 -1
  212. /package/dist/theme/{types.js → contract/baselineResolvedTokenValueManifest.js} +0 -0
  213. /package/dist/theme/{createTheme.d.ts → runtime/createTheme.d.ts} +0 -0
  214. /package/dist/theme/{defaultTheme.d.ts → runtime/defaultTheme.d.ts} +0 -0
  215. /package/dist/theme/{initAldTheme.d.ts → runtime/initAldTheme.d.ts} +0 -0
  216. /package/dist/theme/{themeToCssVars.d.ts → runtime/themeToCssVars.d.ts} +0 -0
  217. /package/dist/theme/{tokenMap.d.ts → runtime/tokenMap.d.ts} +0 -0
  218. /package/dist/theme/{types.d.ts → runtime/types.d.ts} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n disabled={currentDisabled}\n className={cn(\n 'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n userChecked\n ? 'tw-bg-[var(--alias-colors-icon-brand)] hover:tw-bg-[var(--alias-colors-icon-selected)]'\n : 'tw-bg-[var(--alias-colors-icon-subtler)] hover:tw-bg-[var(--alias-colors-icon-subtle)]',\n currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n )}\n style={{ width: trackW, height: trackH }}\n onClick={handleClick}\n >\n <span\n className={cn(\n 'tw-block tw-rounded-full tw-bg-white tw-shadow-sm tw-transition-transform tw-duration-200',\n )}\n style={{\n width: thumbSize,\n height: thumbSize,\n marginLeft: thumbOffset,\n transform: userChecked\n ? `translateX(${thumbTranslate}px)`\n : 'translateX(0)',\n }}\n />\n </button>\n {children && (\n <span\n className={cn(\n 'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--alias-colors-text-default)]',\n size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n currentDisabled && 'tw-opacity-50',\n )}\n >\n {children}\n </span>\n )}\n </span>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,2FACA,0FACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,4FACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,6GACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Switch/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\n\nexport type SwitchChangeEventHandler = (\n checked: boolean,\n event: React.MouseEvent<HTMLButtonElement>,\n) => void;\nexport type SwitchClickEventHandler = SwitchChangeEventHandler;\nexport type SwitchSize = 'large' | 'middle' | 'small';\n\nexport interface ISwitchProps {\n className?: string;\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: SwitchSize;\n onClick?: SwitchChangeEventHandler;\n onChange?: SwitchChangeEventHandler;\n children?: React.ReactNode;\n /** 透传到内部 switch 按钮元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 switch 按钮元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nconst switchSizeConfig: Record<\n SwitchSize,\n {\n trackW: number;\n trackH: number;\n thumbSize: number;\n }\n> = {\n large: {\n trackW: 36,\n trackH: 20,\n thumbSize: 16,\n },\n middle: {\n trackW: 28,\n trackH: 16,\n thumbSize: 12,\n },\n small: {\n trackW: 22,\n trackH: 12,\n thumbSize: 8,\n },\n};\n\nconst Switch: React.FC<ISwitchProps> = ({\n className = '',\n disabled: customDisabled,\n loading = false,\n size: customSize,\n checked,\n defaultChecked,\n onChange,\n onClick,\n children,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n}) => {\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n\n const [userChecked, setUserChecked] = useState(\n typeof checked === 'undefined' ? defaultChecked : checked,\n );\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const currentDisabled = loading ? true : mergedDisabled;\n\n useEffect(() => {\n if (typeof checked === 'boolean') {\n setUserChecked(checked);\n }\n }, [checked]);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (currentDisabled) return;\n const newChecked = !userChecked;\n if (checked === undefined) {\n setUserChecked(newChecked);\n }\n onChange?.(newChecked, e);\n onClick?.(newChecked, e);\n };\n\n const { trackW, trackH, thumbSize } = switchSizeConfig[size];\n const thumbOffset = 2;\n const thumbTranslate = trackW - thumbSize - thumbOffset * 2;\n\n return (\n <span\n className={cn(\n className,\n 'ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]',\n `ald-switch-${size}`,\n currentDisabled && 'tw-pointer-events-none tw-cursor-default',\n {\n 'ald-switch-disabled': currentDisabled,\n 'ald-switch-checked': userChecked,\n },\n )}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={!!userChecked}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n disabled={currentDisabled}\n className={cn(\n 'ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200',\n userChecked\n ? 'tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]'\n : 'tw-bg-[var(--action-neutral-subtle-normal)] hover:tw-bg-[var(--action-neutral-subtle-hover)]',\n currentDisabled && 'tw-cursor-not-allowed tw-opacity-40',\n )}\n style={{ width: trackW, height: trackH }}\n onClick={handleClick}\n >\n <span\n className={cn(\n 'tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200',\n )}\n style={{\n width: thumbSize,\n height: thumbSize,\n marginLeft: thumbOffset,\n transform: userChecked\n ? `translateX(${thumbTranslate}px)`\n : 'translateX(0)',\n }}\n />\n </button>\n {children && (\n <span\n className={cn(\n 'ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]',\n size === 'large' && 'tw-h-5 tw-text-base tw-leading-5',\n size === 'middle' && 'tw-h-4 tw-text-sm tw-leading-4',\n size === 'small' && 'tw-h-3 tw-text-xs tw-leading-3',\n currentDisabled && 'tw-opacity-50',\n )}\n >\n {children}\n </span>\n )}\n </span>\n );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;AA4BA,IAAM,mBAOF;CACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACF;AAED,IAAM,UAAkC,EACtC,YAAY,IACZ,UAAU,gBACV,UAAU,OACV,MAAM,YACN,SACA,gBACA,UACA,SACA,UACA,eAAe,YACf,cAAc,gBACV;CACJ,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAE1C,MAAM,CAAC,aAAa,kBAAkB,SACpC,OAAO,YAAY,cAAc,iBAAiB,QACnD;CAED,MAAM,WAAW,WAAW,gBAAgB;CAG5C,MAAM,kBAAkB,UAAU,OAFX,kBAAkB;AAIzC,iBAAgB;AACd,MAAI,OAAO,YAAY,UACrB,gBAAe,QAAQ;IAExB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,MAA2C;AAC9D,MAAI,gBAAiB;EACrB,MAAM,aAAa,CAAC;AACpB,MAAI,YAAY,OACd,gBAAe,WAAW;AAE5B,aAAW,YAAY,EAAE;AACzB,YAAU,YAAY,EAAE;;CAG1B,MAAM,EAAE,QAAQ,QAAQ,cAAc,iBAAiB;CACvD,MAAM,cAAc;CACpB,MAAM,iBAAiB,SAAS,YAAY,cAAc;AAE1D,QACE,qBAAC,QAAD;EACE,WAAW,GACT,WACA,oEACA,cAAc,QACd,mBAAmB,4CACnB;GACE,uBAAuB;GACvB,sBAAsB;GACvB,CACF;YAVH,CAYE,oBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,gBAAc,CAAC,CAAC;GAChB,eAAa;GACb,cAAY;GACZ,UAAU;GACV,WAAW,GACT,uJACA,cACI,mFACA,gGACJ,mBAAmB,sCACpB;GACD,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ;GACxC,SAAS;aAET,oBAAC,QAAD;IACE,WAAW,GACT,kHACD;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,YAAY;KACZ,WAAW,cACP,cAAc,eAAe,OAC7B;KACL;IACD,CAAA;GACK,CAAA,EACR,YACC,oBAAC,QAAD;GACE,WAAW,GACT,mGACA,SAAS,WAAW,oCACpB,SAAS,YAAY,kCACrB,SAAS,WAAW,kCACpB,mBAAmB,gBACpB;GAEA;GACI,CAAA,CAEJ"}
@@ -11,15 +11,15 @@ function Header(props) {
11
11
  const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column.columnDef.meta;
12
12
  let sortIcon = /* @__PURE__ */ jsx(Memo$1, {
13
13
  size: 20,
14
- color: "var( --interaction-neutral-normal)"
14
+ color: "var(--action-neutral-normal)"
15
15
  });
16
16
  if (sortOrder === "ascend") sortIcon = /* @__PURE__ */ jsx(Memo, {
17
17
  size: 20,
18
- color: "var( --interaction-default-normal)"
18
+ color: "var(--action-primary-normal)"
19
19
  });
20
20
  else if (sortOrder === "descend") sortIcon = /* @__PURE__ */ jsx(Memo$2, {
21
21
  size: 20,
22
- color: "var( --interaction-default-normal)"
22
+ color: "var(--action-primary-normal)"
23
23
  });
24
24
  const onClickTh = useCallback((e) => {
25
25
  if (sortOrder === void 0 || !dataIndex || typeof onSort !== "function") return;
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n const { column } = props;\n const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n\n let sortIcon = (\n <SortIcon size={20} color={'var( --interaction-neutral-normal)'} />\n );\n if (sortOrder === 'ascend') {\n sortIcon = (\n <SortAscIcon size={20} color={'var( --interaction-default-normal)'} />\n );\n } else if (sortOrder === 'descend') {\n sortIcon = (\n <SortDescIcon size={20} color={'var( --interaction-default-normal)'} />\n );\n }\n\n const onClickTh = useCallback<MouseEventHandler>(\n (e) => {\n if (\n sortOrder === undefined ||\n !dataIndex ||\n typeof onSort !== 'function'\n ) {\n return;\n }\n e.stopPropagation();\n\n let newSortOrder: typeof sortOrder;\n if (sortOrder === 'ascend') {\n newSortOrder = 'descend';\n } else if (sortOrder === 'descend') {\n newSortOrder = null;\n } else {\n newSortOrder = 'ascend';\n }\n onSort(dataIndex, newSortOrder);\n },\n [dataIndex, onSort, sortOrder],\n );\n\n let content = title;\n if (typeof content === 'string') {\n if (sortOrder !== undefined) {\n content = (\n <span className={prefixCls('sort-th-inner')}>\n <span className={prefixCls('sort-title')}>{title}</span>\n <span className={prefixCls('sort-btn')}>{sortIcon}</span>\n </span>\n );\n }\n }\n\n return typeof title === 'string' ? (\n <div\n key={dataIndex}\n className={cn(prefixCls('th-default'), prefixCls(`align-${align}`), {\n [prefixCls('td-ellipsis-content')]: ellipsis,\n [prefixCls('th-sortable')]: sortOrder !== undefined,\n })}\n onClick={onClickTh}\n >\n {content}\n </div>\n ) : (\n <>{title}</>\n );\n}\n\nexport interface IProps<T> {\n column: Column<T>;\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,OAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,OAAO,WAAW,OAAO,UAAU,WAAW,WAAW,OAC9D,UAAU;CAEb,IAAI,WACF,oBAAC,QAAD;EAAU,MAAM;EAAI,OAAO;EAAyC,CAAA;AAEtE,KAAI,cAAc,SAChB,YACE,oBAAC,MAAD;EAAa,MAAM;EAAI,OAAO;EAAyC,CAAA;UAEhE,cAAc,UACvB,YACE,oBAAC,QAAD;EAAc,MAAM;EAAI,OAAO;EAAyC,CAAA;CAI5E,MAAM,YAAY,aACf,MAAM;AACL,MACE,cAAc,UACd,CAAC,aACD,OAAO,WAAW,WAElB;AAEF,IAAE,iBAAiB;EAEnB,IAAI;AACJ,MAAI,cAAc,SAChB,gBAAe;WACN,cAAc,UACvB,gBAAe;MAEf,gBAAe;AAEjB,SAAO,WAAW,aAAa;IAEjC;EAAC;EAAW;EAAQ;EAAU,CAC/B;CAED,IAAI,UAAU;AACd,KAAI,OAAO,YAAY,UACrB;MAAI,cAAc,OAChB,WACE,qBAAC,QAAD;GAAM,WAAW,UAAU,gBAAgB;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAW,UAAU,aAAa;cAAG;IAAa,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAW,UAAU,WAAW;cAAG;IAAgB,CAAA,CACpD;;;AAKb,QAAO,OAAO,UAAU,WACtB,oBAAC,OAAD;EAEE,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,EAAE;IACjE,UAAU,sBAAsB,GAAG;IACnC,UAAU,cAAc,GAAG,cAAc;GAC3C,CAAC;EACF,SAAS;YAER;EACG,EARC,UAQD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}
1
+ {"version":3,"file":"Header.js","names":[],"sources":["../../../src/Table/components/Header.tsx"],"sourcesContent":["import { Column } from '@tanstack/react-table';\nimport { cn } from '../../lib/utils';\nimport React, { MouseEventHandler, useCallback } from 'react';\nimport SortAscIcon from '../../Icon/components/SortAscendingOrderColor';\nimport SortIcon from '../../Icon/components/SortColor';\nimport SortDescIcon from '../../Icon/components/SortDescendingOrderColor';\nimport { prefixCls } from '../helper';\nimport { ITableColumn, ITableProps } from '../types';\n\nexport default function Header<T extends object>(props: IProps<T>) {\n const { column } = props;\n const { title, dataIndex, align, ellipsis, sortOrder, onSort } = column\n .columnDef.meta as ITableColumn & { onSort: ITableProps<T>['onSort'] };\n\n let sortIcon = <SortIcon size={20} color={'var(--action-neutral-normal)'} />;\n if (sortOrder === 'ascend') {\n sortIcon = <SortAscIcon size={20} color={'var(--action-primary-normal)'} />;\n } else if (sortOrder === 'descend') {\n sortIcon = (\n <SortDescIcon size={20} color={'var(--action-primary-normal)'} />\n );\n }\n\n const onClickTh = useCallback<MouseEventHandler>(\n (e) => {\n if (\n sortOrder === undefined ||\n !dataIndex ||\n typeof onSort !== 'function'\n ) {\n return;\n }\n e.stopPropagation();\n\n let newSortOrder: typeof sortOrder;\n if (sortOrder === 'ascend') {\n newSortOrder = 'descend';\n } else if (sortOrder === 'descend') {\n newSortOrder = null;\n } else {\n newSortOrder = 'ascend';\n }\n onSort(dataIndex, newSortOrder);\n },\n [dataIndex, onSort, sortOrder],\n );\n\n let content = title;\n if (typeof content === 'string') {\n if (sortOrder !== undefined) {\n content = (\n <span className={prefixCls('sort-th-inner')}>\n <span className={prefixCls('sort-title')}>{title}</span>\n <span className={prefixCls('sort-btn')}>{sortIcon}</span>\n </span>\n );\n }\n }\n\n return typeof title === 'string' ? (\n <div\n key={dataIndex}\n className={cn(prefixCls('th-default'), prefixCls(`align-${align}`), {\n [prefixCls('td-ellipsis-content')]: ellipsis,\n [prefixCls('th-sortable')]: sortOrder !== undefined,\n })}\n onClick={onClickTh}\n >\n {content}\n </div>\n ) : (\n <>{title}</>\n );\n}\n\nexport interface IProps<T> {\n column: Column<T>;\n}\n"],"mappings":";;;;;;;;AASA,SAAwB,OAAyB,OAAkB;CACjE,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,OAAO,WAAW,OAAO,UAAU,WAAW,WAAW,OAC9D,UAAU;CAEb,IAAI,WAAW,oBAAC,QAAD;EAAU,MAAM;EAAI,OAAO;EAAkC,CAAA;AAC5E,KAAI,cAAc,SAChB,YAAW,oBAAC,MAAD;EAAa,MAAM;EAAI,OAAO;EAAkC,CAAA;UAClE,cAAc,UACvB,YACE,oBAAC,QAAD;EAAc,MAAM;EAAI,OAAO;EAAkC,CAAA;CAIrE,MAAM,YAAY,aACf,MAAM;AACL,MACE,cAAc,UACd,CAAC,aACD,OAAO,WAAW,WAElB;AAEF,IAAE,iBAAiB;EAEnB,IAAI;AACJ,MAAI,cAAc,SAChB,gBAAe;WACN,cAAc,UACvB,gBAAe;MAEf,gBAAe;AAEjB,SAAO,WAAW,aAAa;IAEjC;EAAC;EAAW;EAAQ;EAAU,CAC/B;CAED,IAAI,UAAU;AACd,KAAI,OAAO,YAAY,UACrB;MAAI,cAAc,OAChB,WACE,qBAAC,QAAD;GAAM,WAAW,UAAU,gBAAgB;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAW,UAAU,aAAa;cAAG;IAAa,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAW,UAAU,WAAW;cAAG;IAAgB,CAAA,CACpD;;;AAKb,QAAO,OAAO,UAAU,WACtB,oBAAC,OAAD;EAEE,WAAW,GAAG,UAAU,aAAa,EAAE,UAAU,SAAS,QAAQ,EAAE;IACjE,UAAU,sBAAsB,GAAG;IACnC,UAAU,cAAc,GAAG,cAAc;GAC3C,CAAC;EACF,SAAS;YAER;EACG,EARC,UAQD,GAEN,oBAAA,UAAA,EAAA,UAAG,OAAS,CAAA"}
@@ -99,7 +99,7 @@ function Tabs(props) {
99
99
  "--tabs-padding": `${paddingVal}px`
100
100
  },
101
101
  children: [/* @__PURE__ */ jsxs("div", {
102
- 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)]"),
102
+ 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)]"),
103
103
  style: headerBackgroundColor || tabBarStyle ? {
104
104
  ...tabBarStyle,
105
105
  ...headerBackgroundColor ? { backgroundColor: headerBackgroundColor } : {}
@@ -108,7 +108,7 @@ function Tabs(props) {
108
108
  extraLeft,
109
109
  showScrollButtons && !isVertical && /* @__PURE__ */ jsx("button", {
110
110
  type: "button",
111
- 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"),
111
+ 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"),
112
112
  onClick: () => scrollBy(-200),
113
113
  "aria-label": "Scroll tabs left",
114
114
  children: /* @__PURE__ */ jsx(Memo, { size: 16 })
@@ -127,7 +127,7 @@ function Tabs(props) {
127
127
  const isActive = activeKey === item.key;
128
128
  const showClose = isEditable && item.closable !== false;
129
129
  return /* @__PURE__ */ jsxs("div", {
130
- 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"),
130
+ 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"),
131
131
  onClick: item.disabled ? void 0 : (e) => handleTabClick(item.key, e),
132
132
  children: [
133
133
  item.icon,
@@ -136,15 +136,15 @@ function Tabs(props) {
136
136
  children: item.label
137
137
  }),
138
138
  showClose && /* @__PURE__ */ jsx("span", {
139
- 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)]",
139
+ 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)]",
140
140
  onClick: (e) => handleRemove(item.key, e),
141
141
  "aria-label": `Remove ${item.label}`,
142
142
  children: /* @__PURE__ */ jsx(Memo$2, { size: 12 })
143
143
  }),
144
- !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)]" }),
145
- !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)]" }),
146
- !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)]" }),
147
- !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)]" })
144
+ !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)]" }),
145
+ !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)]" }),
146
+ !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)]" }),
147
+ !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)]" })
148
148
  ]
149
149
  }, item.key);
150
150
  })
@@ -152,7 +152,7 @@ function Tabs(props) {
152
152
  }),
153
153
  showScrollButtons && !isVertical && /* @__PURE__ */ jsx("button", {
154
154
  type: "button",
155
- 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"),
155
+ 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"),
156
156
  onClick: () => scrollBy(200),
157
157
  "aria-label": "Scroll tabs right",
158
158
  children: /* @__PURE__ */ jsx(Memo$1, { size: 16 })
@@ -1 +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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"}
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(--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 CHANGED
@@ -11,14 +11,14 @@ function Tag(props) {
11
11
  const bgColor = (() => {
12
12
  if (mode === "border") return "var(--background-default)";
13
13
  if (providedColor) {
14
- if (providedIsHex) return convertHexToRGBA(providedColor, mode === "fill" ? .16 : .06);
14
+ if (providedIsHex) return addHexAlpha(providedColor, mode === "fill" ? .16 : .06);
15
15
  return `color-mix(in srgb, ${providedColor} ${mode === "fill" ? 16 : 6}%, transparent)`;
16
16
  }
17
17
  return mode === "fill" ? tokens.bgSubtle : tokens.bgOnSubtle;
18
18
  })();
19
19
  const textColor = (() => {
20
20
  if (providedColor) {
21
- if (providedIsHex) return convertHexToRGBA(providedColor, 1);
21
+ if (providedIsHex) return addHexAlpha(providedColor, 1);
22
22
  return providedColor;
23
23
  }
24
24
  return tokens.text;
@@ -26,7 +26,7 @@ function Tag(props) {
26
26
  const borderColor = (() => {
27
27
  if (mode === "fill") return "transparent";
28
28
  if (providedColor) {
29
- if (providedIsHex) return convertHexToRGBA(providedColor, .32);
29
+ if (providedIsHex) return addHexAlpha(providedColor, .32);
30
30
  return `color-mix(in srgb, ${providedColor} 32%, transparent)`;
31
31
  }
32
32
  return tokens.borderSubtle;
@@ -79,9 +79,9 @@ var ALD_PREFIX = "ald-tag";
79
79
  function prefixCls(className) {
80
80
  return `${ALD_PREFIX}-${className}`;
81
81
  }
82
- function convertHexToRGBA(hex, opacity) {
83
- const tempHex = hex.replace("#", "");
84
- return `rgba(${parseInt(tempHex.substring(0, 2), 16)},${parseInt(tempHex.substring(2, 4), 16)},${parseInt(tempHex.substring(4, 6), 16)},${opacity})`;
82
+ function addHexAlpha(hex, opacity) {
83
+ const rawHex = hex.startsWith("#") ? hex.slice(1) : hex;
84
+ return `#${rawHex.length === 3 ? rawHex.split("").map((char) => `${char}${char}`).join("") : rawHex.slice(0, 6)}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
85
85
  }
86
86
  function isHexColor(value) {
87
87
  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) {
89
89
  function getStatusTokens(status) {
90
90
  switch (status) {
91
91
  case "success": return {
92
- text: "var(--alias-colors-text-success)",
92
+ text: "var(--content-positive-secondary)",
93
93
  bgSubtle: "var(--background-positive-subtle)",
94
94
  bgOnSubtle: "var(--background-positive-on-subtle)",
95
95
  borderSubtle: "var(--border-positive-subtle)"
96
96
  };
97
97
  case "warning": return {
98
- text: "var(--alias-colors-text-warning)",
98
+ text: "var(--content-warning-secondary)",
99
99
  bgSubtle: "var(--background-warning-subtle)",
100
100
  bgOnSubtle: "var(--background-warning-on-subtle)",
101
101
  borderSubtle: "var(--border-warning-subtle)"
102
102
  };
103
103
  case "error": return {
104
- text: "var(--alias-colors-text-danger)",
104
+ text: "var(--content-negative-secondary)",
105
105
  bgSubtle: "var(--background-negative-subtle)",
106
106
  bgOnSubtle: "var(--background-negative-on-subtle)",
107
107
  borderSubtle: "var(--border-negative-subtle)"
108
108
  };
109
109
  case "default": return {
110
- text: "var(--alias-colors-text-default)",
110
+ text: "var(--content-primary)",
111
111
  bgSubtle: "var(--background-neutral-subtle)",
112
112
  bgOnSubtle: "var(--background-neutral-on-subtle)",
113
113
  borderSubtle: "var(--border-neutral-subtle)"
114
114
  };
115
115
  default: return {
116
- text: "var(--alias-colors-text-information)",
116
+ text: "var(--content-informative-secondary)",
117
117
  bgSubtle: "var(--background-informative-subtle)",
118
118
  bgOnSubtle: "var(--background-informative-on-subtle)",
119
119
  borderSubtle: "var(--border-informative-subtle)"
@@ -1 +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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"}
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 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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"}
@@ -11,8 +11,8 @@ var textLinkVariants = cva("ald-text-link tw-inline-flex tw-cursor-pointer tw-it
11
11
  large: "ald-text-link-large tw-text-base tw-leading-6"
12
12
  },
13
13
  type: {
14
- primary: "ald-text-link-primary tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
15
- secondary: "ald-text-link-secondary tw-text-[var(--alias-colors-text-default)] hover:tw-text-[var(--alias-colors-text-selected)]"
14
+ primary: "ald-text-link-primary tw-text-[var(--action-primary-normal)] hover:tw-text-[var(--action-primary-hover)]",
15
+ secondary: "ald-text-link-secondary tw-text-[var(--content-primary)] hover:tw-text-[var(--content-brand-primary)]"
16
16
  },
17
17
  disabled: {
18
18
  true: "ald-text-link-disabled tw-pointer-events-none tw-cursor-default tw-opacity-50",
@@ -1 +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"}
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(--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"}
@@ -37,7 +37,7 @@ function isClickTrigger(trigger) {
37
37
  function isTriggerDisabled(trigger) {
38
38
  return Array.isArray(trigger) && trigger.length === 0;
39
39
  }
40
- 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";
40
+ 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";
41
41
  function usePortalContainer(getPopupContainer, getTooltipContainer) {
42
42
  const triggerRef = React.useRef(null);
43
43
  const [container, setContainer] = React.useState(void 0);
@@ -70,7 +70,7 @@ function ClickTooltip({ children, title, open, onOpenChange, placement = "top",
70
70
  sideOffset: 4,
71
71
  className: cn(contentClasses, overlayClassName),
72
72
  style: { zIndex },
73
- children: [title, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]" })]
73
+ children: [title, /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "tw-fill-[var(--background-inverted)]" })]
74
74
  })
75
75
  })]
76
76
  });
@@ -115,7 +115,7 @@ function Tooltip(props) {
115
115
  sideOffset: 4,
116
116
  className: cn(contentClasses, overlayClassName),
117
117
  style: { zIndex: resolvedZIndex },
118
- children: [mergedTitle, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "tw-fill-[var(--alias-colors-bg-skeleton-inverse-subtler)]" })]
118
+ children: [mergedTitle, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "tw-fill-[var(--background-inverted)]" })]
119
119
  })
120
120
  })]
121
121
  })
@@ -1 +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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"}
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(--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":";;;;;;;AA0CA,IAAM,UAA+D;CACnE,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAED,IAAM,WAAuD;CAC3D,SAAS;CACT,UAAU;CACV,YAAY;CACZ,aAAa;CACb,SAAS;CACT,YAAY;CACZ,UAAU;CACV,aAAa;CACd;AAED,SAAS,eAAe,SAA8C;AACpE,KAAI,CAAC,QAAS,QAAO;AACrB,KAAI,MAAM,QAAQ,QAAQ,CAAE,QAAO,QAAQ,SAAS,QAAQ;AAC5D,QAAO,YAAY;;AAGrB,SAAS,kBAAkB,SAA8C;AACvE,QAAO,MAAM,QAAQ,QAAQ,IAAI,QAAQ,WAAW;;AAGtD,IAAM,iBACJ;AAEF,SAAS,mBACP,mBACA,qBACA;CACA,MAAM,aAAa,MAAM,OAA2B,KAAK;CACzD,MAAM,CAAC,WAAW,gBAAgB,MAAM,SACtC,OACD;AAED,OAAM,gBAAgB;EACpB,MAAM,SAAS,qBAAqB;AACpC,MAAI,UAAU,WAAW,QACvB,cAAa,OAAO,WAAW,QAAQ,CAAC;IAEzC,CAAC,mBAAmB,oBAAoB,CAAC;AAE5C,QAAO;EAAE;EAAY;EAAW;;AAGlC,SAAS,aAAa,EACpB,UACA,OACA,MACA,cACA,YAAY,OACZ,kBACA,QACA,WACA,cAaC;CACD,MAAM,OAAO,QAAQ,cAAc;CACnC,MAAM,QAAQ,SAAS,cAAc;AAErC,QACE,qBAAC,iBAAiB,MAAlB;EAA6B;EAAoB;YAAjD,CACE,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACvB,MAAM,eAAe,SAAS,GAC7B,MAAM,aAAa,UAAgC,EACjD,KAAK,YACN,CAAC,GAEF,oBAAC,QAAD;IAAM,KAAK;IACR;IACI,CAAA;GAEgB,CAAA,EAC3B,oBAAC,iBAAiB,QAAlB;GAAoC;aAClC,qBAAC,iBAAiB,SAAlB;IACQ;IACC;IACP,YAAY;IACZ,WAAW,GAAG,gBAAgB,iBAAiB;IAC/C,OAAO,EAAE,QAAQ;cALnB,CAOG,OACD,oBAAC,iBAAiB,OAAlB,EAAwB,WAAU,wCAAyC,CAAA,CAClD;;GACH,CAAA,CACJ;;;AAI5B,SAAwB,QAAQ,OAAsB;CACpD,MAAM,EACJ,UACA,OACA,SACA,MACA,cACA,YAAY,OACZ,kBAAkB,GAClB,kBAAkB,GAClB,kBACA,SACA,mBACA,qBACA,WACE;CAEJ,MAAM,EAAE,YAAY,cAAc,mBAChC,mBACA,oBACD;CACD,MAAM,iBAAiB,uBAAuB,OAAO;CACrD,MAAM,cAAc,SAAS;AAE7B,KAAI,CAAC,eAAe,gBAAgB,EAClC,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,KAAI,kBAAkB,QAAQ,CAC5B,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,KAAI,eAAe,QAAQ,CACzB,QACE,oBAAC,cAAD;EACE,OAAO;EACD;EACQ;EACH;EACO;EAClB,QAAQ;EACG;EACC;EAEX;EACY,CAAA;CAInB,MAAM,OAAO,QAAQ,cAAc;CACnC,MAAM,QAAQ,SAAS,cAAc;AAErC,QACE,oBAAC,iBAAiB,UAAlB;EACE,eAAe,kBAAkB;EACjC,mBAAmB,kBAAkB;YAErC,qBAAC,iBAAiB,MAAlB;GAA6B;GAAoB;aAAjD,CACE,oBAAC,iBAAiB,SAAlB;IAA0B,SAAA;cACvB,MAAM,eAAe,SAAS,GAC7B,MAAM,aAAa,UAAgC,EACjD,KAAK,YACN,CAAC,GAEF,oBAAC,QAAD;KAAM,KAAK;KACR;KACI,CAAA;IAEgB,CAAA,EAC3B,oBAAC,iBAAiB,QAAlB;IAAoC;cAClC,qBAAC,iBAAiB,SAAlB;KACQ;KACC;KACP,YAAY;KACZ,WAAW,GAAG,gBAAgB,iBAAiB;KAC/C,OAAO,EAAE,QAAQ,gBAAgB;eALnC,CAOG,aACD,oBAAC,iBAAiB,OAAlB,EAAwB,WAAU,wCAAyC,CAAA,CAClD;;IACH,CAAA,CACJ;;EACE,CAAA"}
@@ -31,7 +31,7 @@ function Tour(props) {
31
31
  onChange?.(prev);
32
32
  };
33
33
  return /* @__PURE__ */ jsxs(Fragment, { children: [mask && /* @__PURE__ */ jsx("div", {
34
- className: "ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-black/45",
34
+ className: "ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-[var(--background-inverted)] tw-opacity-45",
35
35
  style: { zIndex: maskZIndex },
36
36
  onClick: onClose
37
37
  }), /* @__PURE__ */ jsx("div", {
@@ -1 +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"}
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-[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"}
@@ -68,7 +68,7 @@ var Tree = React$1.forwardRef((props, ref) => {
68
68
  };
69
69
  const newIcon = /* @__PURE__ */ jsx(Memo$1, {
70
70
  size: TREE_SWITCH_CION_SIZE,
71
- color: "var(--alias-colors-icon-subtle)"
71
+ color: "var(--content-secondary)"
72
72
  });
73
73
  let mergedDraggable = { icon: newIcon };
74
74
  switch (typeof draggable) {
@@ -220,7 +220,7 @@ var Tree = React$1.forwardRef((props, ref) => {
220
220
  switcherIcon: (nodeProps) => {
221
221
  return /* @__PURE__ */ jsxs(Fragment, { children: [renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /* @__PURE__ */ jsx(Memo, {
222
222
  size: TREE_SWITCH_CION_SIZE,
223
- color: "var(--alias-colors-icon-subtle)",
223
+ color: "var(--content-secondary)",
224
224
  children: t.Tree.expand
225
225
  }), showLine, nodeProps, TREE_SWITCH_CION_SIZE)] });
226
226
  },