@aloudata/aloudata-design 3.0.19 → 3.0.21

package/dist/ColorPicker/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","names":[],"sources":["../../src/ColorPicker/util.ts"],"sourcesContent":["import type { ColorGenInput } from '@rc-component/color-picker';\nimport { Color as RcColor } from '@rc-component/color-picker';\n\nimport { AggregationColor } from './color';\nimport type { ColorValueType } from './interface';\n\nexport const generateColor = (\n  color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>,\n): AggregationColor => {\n  if (color instanceof AggregationColor) {\n    return color;\n  }\n\n  return new AggregationColor(color);\n};\n\nexport const getRoundNumber = (value: number | string) =>\n  Math.round(Number(value || 0));\n\nexport const getColorAlpha = (color: AggregationColor) =>\n  getRoundNumber(color.toHsb().a * 100);\n\n/** Return the color whose `alpha` is 1 */\nexport const genAlphaColor = (color: AggregationColor, alpha?: number) => {\n  const rgba = color.toRgb();\n\n  // Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0\n  // So if rgb is empty, we should get from hsb\n  if (!rgba.r && !rgba.g && !rgba.b) {\n    const hsba = color.toHsb();\n    hsba.a = alpha || 1;\n\n    return generateColor(hsba);\n  }\n\n  rgba.a = alpha || 1;\n\n  return generateColor(rgba);\n};\n\n/**\n * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888\n */\nexport const getGradientPercentColor = (\n  colors: { percent: number; color: string }[],\n  percent: number,\n): string => {\n  const filledColors = [\n    {\n      percent: 0,\n      color: colors[0].color,\n    },\n    ...colors,\n    {\n      percent: 100,\n      color: colors[colors.length - 1].color,\n    },\n  ];\n\n  for (let i = 0; i < filledColors.length - 1; i += 1) {\n    const startPtg = filledColors[i].percent;\n    const endPtg = filledColors[i + 1].percent;\n    const startColor = filledColors[i].color;\n    const endColor = filledColors[i + 1].color;\n\n    if (startPtg <= percent && percent <= endPtg) {\n      const dist = endPtg - startPtg;\n      if (dist === 0) {\n        return startColor;\n      }\n\n      const ratio = ((percent - startPtg) / dist) * 100;\n      const startRcColor = new RcColor(startColor);\n      const endRcColor = new RcColor(endColor);\n\n      return startRcColor.mix(endRcColor, ratio).toRgbString();\n    }\n  }\n\n  return '';\n};\n"],"mappings":";;;AAMA,IAAa,iBACX,UACqB;AACrB,KAAI,iBAAiB,iBACnB,QAAO;AAGT,QAAO,IAAI,iBAAiB,MAAM;;AAGpC,IAAa,kBAAkB,UAC7B,KAAK,MAAM,OAAO,SAAS,EAAE,CAAC;AAEhC,IAAa,iBAAiB,UAC5B,eAAe,MAAM,OAAO,CAAC,IAAI,IAAI;;AAGvC,IAAa,iBAAiB,OAAyB,UAAmB;CACxE,MAAM,OAAO,MAAM,OAAO;AAI1B,KAAI,CAAC,KAAK,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;EACjC,MAAM,OAAO,MAAM,OAAO;AAC1B,OAAK,IAAI,SAAS;AAElB,SAAO,cAAc,KAAK;;AAG5B,MAAK,IAAI,SAAS;AAElB,QAAO,cAAc,KAAK"}
+{"version":3,"file":"util.js","names":[],"sources":["../../src/ColorPicker/util.ts"],"sourcesContent":["import type { ColorGenInput } from '@rc-component/color-picker';\nimport { Color as RcColor } from '@rc-component/color-picker';\n\nimport { AggregationColor } from './color';\nimport type { ColorValueType } from './interface';\n\nexport const generateColor = (\n  color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>,\n): AggregationColor => {\n  if (color instanceof AggregationColor) {\n    return color;\n  }\n\n  return new AggregationColor(color);\n};\n\nexport const getRoundNumber = (value: number | string) =>\n  Math.round(Number(value || 0));\n\nexport const getColorAlpha = (color: AggregationColor) =>\n  getRoundNumber(color.toHsb().a * 100);\n\n/** Return the color whose `alpha` is 1 */\nexport const genAlphaColor = (color: AggregationColor, alpha?: number) => {\n  const rgba = color.toRgb();\n\n  // Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0\n  // So if rgb is empty, we should get from hsb\n  if (!rgba.r && !rgba.g && !rgba.b) {\n    const hsba = color.toHsb();\n    hsba.a = alpha || 1;\n\n    return generateColor(hsba);\n  }\n\n  rgba.a = alpha || 1;\n\n  return generateColor(rgba);\n};\n\n/**\n * Get percent position color from neighboring color stops.\n */\nexport const getGradientPercentColor = (\n  colors: { percent: number; color: string }[],\n  percent: number,\n): string => {\n  const filledColors = [\n    {\n      percent: 0,\n      color: colors[0].color,\n    },\n    ...colors,\n    {\n      percent: 100,\n      color: colors[colors.length - 1].color,\n    },\n  ];\n\n  for (let i = 0; i < filledColors.length - 1; i += 1) {\n    const startPtg = filledColors[i].percent;\n    const endPtg = filledColors[i + 1].percent;\n    const startColor = filledColors[i].color;\n    const endColor = filledColors[i + 1].color;\n\n    if (startPtg <= percent && percent <= endPtg) {\n      const dist = endPtg - startPtg;\n      if (dist === 0) {\n        return startColor;\n      }\n\n      const ratio = ((percent - startPtg) / dist) * 100;\n      const startRcColor = new RcColor(startColor);\n      const endRcColor = new RcColor(endColor);\n\n      return startRcColor.mix(endRcColor, ratio).toRgbString();\n    }\n  }\n\n  return '';\n};\n"],"mappings":";;;AAMA,IAAa,iBACX,UACqB;AACrB,KAAI,iBAAiB,iBACnB,QAAO;AAGT,QAAO,IAAI,iBAAiB,MAAM;;AAGpC,IAAa,kBAAkB,UAC7B,KAAK,MAAM,OAAO,SAAS,EAAE,CAAC;AAEhC,IAAa,iBAAiB,UAC5B,eAAe,MAAM,OAAO,CAAC,IAAI,IAAI;;AAGvC,IAAa,iBAAiB,OAAyB,UAAmB;CACxE,MAAM,OAAO,MAAM,OAAO;AAI1B,KAAI,CAAC,KAAK,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;EACjC,MAAM,OAAO,MAAM,OAAO;AAC1B,OAAK,IAAI,SAAS;AAElB,SAAO,cAAc,KAAK;;AAG5B,MAAK,IAAI,SAAS;AAElB,QAAO,cAAc,KAAK"}

package/dist/DataPreviewTable/components/Body/Cell.js

@@ -2,7 +2,7 @@ import { cn } from "../../../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/DataPreviewTable/components/Body/Cell.tsx
-var bodyCellClassName = "ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--alias-colors-border-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]";
+var bodyCellClassName = "ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]";
 function Cell(props) {
 	const { style, value } = props;
 	if (typeof value === "string") return /* @__PURE__ */ jsx("div", {
@@ -18,7 +18,7 @@ function Cell(props) {
 	if (typeof value === "object" && value === null) return /* @__PURE__ */ jsx("div", {
 		style: {
 			fontStyle: "italic",
-			color: "var(--alias-colors-text-subtle)",
+			color: "var(--content-secondary)",
 			...style
 		},
 		className: cn(bodyCellClassName, "ald-data-preview-body-cell-null"),

package/dist/DataPreviewTable/components/Body/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/Cell.tsx"],"sourcesContent":["interface ICell {\n  value: TValue;\n  style?: React.CSSProperties;\n}\nimport { cn } from '../../../lib/utils';\nimport React from 'react';\nimport { TValue } from '../../interface';\n\nconst bodyCellClassName =\n  'ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--alias-colors-border-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]';\n\nexport default function Cell(props: ICell) {\n  const { style, value } = props;\n  if (typeof value === 'string') {\n    return (\n      <div style={style} className={bodyCellClassName}>\n        {value}\n      </div>\n    );\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return (\n      <div style={style} className={bodyCellClassName}>\n        {JSON.stringify(value)}\n      </div>\n    );\n  }\n  if (typeof value === 'object' && value === null) {\n    return (\n      <div\n        style={{\n          fontStyle: 'italic',\n          color: 'var(--alias-colors-text-subtle)',\n          ...style,\n        }}\n        className={cn(bodyCellClassName, 'ald-data-preview-body-cell-null')}\n      >\n        null\n      </div>\n    );\n  }\n  return (\n    <div style={style} className={bodyCellClassName}>\n      {value}\n    </div>\n  );\n}\n"],"mappings":";;;;AAQA,IAAM,oBACJ;AAEF,SAAwB,KAAK,OAAc;CACzC,MAAM,EAAE,OAAO,UAAU;AACzB,KAAI,OAAO,UAAU,SACnB,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B;EACG,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B,KAAK,UAAU,MAAM;EAClB,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,UAAU,KACzC,QACE,oBAAC,OAAD;EACE,OAAO;GACL,WAAW;GACX,OAAO;GACP,GAAG;GACJ;EACD,WAAW,GAAG,mBAAmB,kCAAkC;YACpE;EAEK,CAAA;AAGV,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B;EACG,CAAA"}
+{"version":3,"file":"Cell.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/Cell.tsx"],"sourcesContent":["interface ICell {\n  value: TValue;\n  style?: React.CSSProperties;\n}\nimport { cn } from '../../../lib/utils';\nimport React from 'react';\nimport { TValue } from '../../interface';\n\nconst bodyCellClassName =\n  'ald-data-preview-body-cell tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-px-1 tw-py-0.5 tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]';\n\nexport default function Cell(props: ICell) {\n  const { style, value } = props;\n  if (typeof value === 'string') {\n    return (\n      <div style={style} className={bodyCellClassName}>\n        {value}\n      </div>\n    );\n  }\n  if (typeof value === 'number' || typeof value === 'boolean') {\n    return (\n      <div style={style} className={bodyCellClassName}>\n        {JSON.stringify(value)}\n      </div>\n    );\n  }\n  if (typeof value === 'object' && value === null) {\n    return (\n      <div\n        style={{\n          fontStyle: 'italic',\n          color: 'var(--content-secondary)',\n          ...style,\n        }}\n        className={cn(bodyCellClassName, 'ald-data-preview-body-cell-null')}\n      >\n        null\n      </div>\n    );\n  }\n  return (\n    <div style={style} className={bodyCellClassName}>\n      {value}\n    </div>\n  );\n}\n"],"mappings":";;;;AAQA,IAAM,oBACJ;AAEF,SAAwB,KAAK,OAAc;CACzC,MAAM,EAAE,OAAO,UAAU;AACzB,KAAI,OAAO,UAAU,SACnB,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B;EACG,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B,KAAK,UAAU,MAAM;EAClB,CAAA;AAGV,KAAI,OAAO,UAAU,YAAY,UAAU,KACzC,QACE,oBAAC,OAAD;EACE,OAAO;GACL,WAAW;GACX,OAAO;GACP,GAAG;GACJ;EACD,WAAW,GAAG,mBAAmB,kCAAkC;YACpE;EAEK,CAAA;AAGV,QACE,oBAAC,OAAD;EAAY;EAAO,WAAW;YAC3B;EACG,CAAA"}

package/dist/DataPreviewTable/components/Body/index.js

@@ -21,7 +21,7 @@ function Body(props) {
 				};
 				const render = columns[columnIndex].render;
 				if (render) return /* @__PURE__ */ jsx("div", {
-					className: cn("ald-data-preview-body-cell ald-data-preview-body-cell-custom", "tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--alias-colors-border-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]"),
+					className: cn("ald-data-preview-body-cell ald-data-preview-body-cell-custom", "tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]"),
 					style,
 					children: render(cell)
 				}, columnIndex);

package/dist/DataPreviewTable/components/Body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/index.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { cn } from '../../../lib/utils';\nimport { CELL_HEIGHT } from '../../constant';\nimport { IColumnLayout, PreviewColumn, TValue } from '../../interface';\nimport Cell from './Cell';\ninterface IHeader {\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  columnRange: [number, number];\n  datasource: TValue[][];\n  rowRange: [number, number];\n  headerHeight: number;\n}\nfunction Body(props: IHeader) {\n  const {\n    columns,\n    columnLayout,\n    datasource,\n    columnRange: [startIndex, endIndex],\n    rowRange: [startRowIndex, endRowIndex],\n    headerHeight,\n  } = props;\n\n  return (\n    <div className=\"ald-data-preview-table-body\">\n      {datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {\n        const currentRowIndex = startRowIndex + rowIndex;\n\n        return (\n          <React.Fragment key={currentRowIndex}>\n            {row.slice(startIndex, endIndex + 1).map((cell, index) => {\n              const columnIndex = startIndex + index;\n              const style: React.CSSProperties = {\n                height: CELL_HEIGHT,\n                width: columnLayout[columns[columnIndex].id].width,\n                top: currentRowIndex * CELL_HEIGHT + headerHeight,\n                left: columnLayout[columns[columnIndex].id].left,\n                position: 'absolute',\n                textAlign: columns[columnIndex].align || 'left',\n              };\n              const render = columns[columnIndex].render;\n              if (render) {\n                return (\n                  <div\n                    className={cn(\n                      'ald-data-preview-body-cell ald-data-preview-body-cell-custom',\n                      'tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--alias-colors-border-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--alias-colors-text-default)]',\n                    )}\n                    style={style}\n                    key={columnIndex}\n                  >\n                    {render(cell)}\n                  </div>\n                );\n              }\n              return <Cell key={columnIndex} style={style} value={cell} />;\n            })}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\nexport default memo(Body);\n"],"mappings":";;;;;AAaA,SAAS,KAAK,OAAgB;CAC5B,MAAM,EACJ,SACA,cACA,YACA,aAAa,CAAC,YAAY,WAC1B,UAAU,CAAC,eAAe,cAC1B,iBACE;AAEJ,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,WAAW,MAAM,eAAe,YAAY,CAAC,KAAK,KAAK,aAAa;GACnE,MAAM,kBAAkB,gBAAgB;AAExC,UACE,oBAAC,MAAM,UAAP,EAAA,UACG,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,MAAM,UAAU;IACxD,MAAM,cAAc,aAAa;IACjC,MAAM,QAA6B;KACjC,QAAA;KACA,OAAO,aAAa,QAAQ,aAAa,IAAI;KAC7C,KAAK,kBAAA,KAAgC;KACrC,MAAM,aAAa,QAAQ,aAAa,IAAI;KAC5C,UAAU;KACV,WAAW,QAAQ,aAAa,SAAS;KAC1C;IACD,MAAM,SAAS,QAAQ,aAAa;AACpC,QAAI,OACF,QACE,oBAAC,OAAD;KACE,WAAW,GACT,gEACA,iNACD;KACM;eAGN,OAAO,KAAK;KACT,EAHC,YAGD;AAGV,WAAO,oBAAC,MAAD;KAA+B;KAAO,OAAO;KAAQ,EAA1C,YAA0C;KAC5D,EACa,EA5BI,gBA4BJ;IAEnB;EACE,CAAA;;AAGV,IAAA,eAAe,KAAK,KAAK"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Body/index.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { cn } from '../../../lib/utils';\nimport { CELL_HEIGHT } from '../../constant';\nimport { IColumnLayout, PreviewColumn, TValue } from '../../interface';\nimport Cell from './Cell';\ninterface IHeader {\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  columnRange: [number, number];\n  datasource: TValue[][];\n  rowRange: [number, number];\n  headerHeight: number;\n}\nfunction Body(props: IHeader) {\n  const {\n    columns,\n    columnLayout,\n    datasource,\n    columnRange: [startIndex, endIndex],\n    rowRange: [startRowIndex, endRowIndex],\n    headerHeight,\n  } = props;\n\n  return (\n    <div className=\"ald-data-preview-table-body\">\n      {datasource.slice(startRowIndex, endRowIndex).map((row, rowIndex) => {\n        const currentRowIndex = startRowIndex + rowIndex;\n\n        return (\n          <React.Fragment key={currentRowIndex}>\n            {row.slice(startIndex, endIndex + 1).map((cell, index) => {\n              const columnIndex = startIndex + index;\n              const style: React.CSSProperties = {\n                height: CELL_HEIGHT,\n                width: columnLayout[columns[columnIndex].id].width,\n                top: currentRowIndex * CELL_HEIGHT + headerHeight,\n                left: columnLayout[columns[columnIndex].id].left,\n                position: 'absolute',\n                textAlign: columns[columnIndex].align || 'left',\n              };\n              const render = columns[columnIndex].render;\n              if (render) {\n                return (\n                  <div\n                    className={cn(\n                      'ald-data-preview-body-cell ald-data-preview-body-cell-custom',\n                      'tw-overflow-hidden tw-whitespace-nowrap tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-text-xs tw-leading-4 tw-text-[var(--content-primary)]',\n                    )}\n                    style={style}\n                    key={columnIndex}\n                  >\n                    {render(cell)}\n                  </div>\n                );\n              }\n              return <Cell key={columnIndex} style={style} value={cell} />;\n            })}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\nexport default memo(Body);\n"],"mappings":";;;;;AAaA,SAAS,KAAK,OAAgB;CAC5B,MAAM,EACJ,SACA,cACA,YACA,aAAa,CAAC,YAAY,WAC1B,UAAU,CAAC,eAAe,cAC1B,iBACE;AAEJ,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,WAAW,MAAM,eAAe,YAAY,CAAC,KAAK,KAAK,aAAa;GACnE,MAAM,kBAAkB,gBAAgB;AAExC,UACE,oBAAC,MAAM,UAAP,EAAA,UACG,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,MAAM,UAAU;IACxD,MAAM,cAAc,aAAa;IACjC,MAAM,QAA6B;KACjC,QAAA;KACA,OAAO,aAAa,QAAQ,aAAa,IAAI;KAC7C,KAAK,kBAAA,KAAgC;KACrC,MAAM,aAAa,QAAQ,aAAa,IAAI;KAC5C,UAAU;KACV,WAAW,QAAQ,aAAa,SAAS;KAC1C;IACD,MAAM,SAAS,QAAQ,aAAa;AACpC,QAAI,OACF,QACE,oBAAC,OAAD;KACE,WAAW,GACT,gEACA,kMACD;KACM;eAGN,OAAO,KAAK;KACT,EAHC,YAGD;AAGV,WAAO,oBAAC,MAAD;KAA+B;KAAO,OAAO;KAAQ,EAA1C,YAA0C;KAC5D,EACa,EA5BI,gBA4BJ;IAEnB;EACE,CAAA;;AAGV,IAAA,eAAe,KAAK,KAAK"}

package/dist/DataPreviewTable/components/DragBar/index.js

@@ -34,7 +34,7 @@ function DragBar(props) {
 			right: dragBarLeft,
 			height: headerHeight
 		},
-		className: cn("ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--semantic-brand-500)]", { "ald-data-preview-header-drag-bar-active tw-bg-[var(--semantic-brand-500)]": show }),
+		className: cn("ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]", { "ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]": show }),
 		children: show ? createPortal(/* @__PURE__ */ jsx(Mask, {
 			onMouseMove: (event) => {
 				if (mouseDownRef.current.down === false) return;

package/dist/DataPreviewTable/components/DragBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/DragBar/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { memo, useCallback, useRef, useState } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { COLUMN_MIN_WIDTH } from '../../constant';\nimport Mask from './Mask';\nfunction DragBar(props: {\n  wrapWidth: number;\n  columnId: string;\n  onChange: (columnId: string, width: number) => void;\n  headerHeight: number;\n}) {\n  const { wrapWidth, columnId, onChange, headerHeight } = props;\n  const [show, setShow] = useState(false);\n  const [dragBarLeft, setDragBarLeft] = useState(0);\n  const dragElRef = useRef<HTMLDivElement>(null);\n  const mouseDownRef = useRef({\n    down: false,\n    clientX: 0,\n  });\n  const getBarLeft = useCallback(\n    (currentClientX: number) => {\n      const startClientX = mouseDownRef.current.clientX;\n      const offset = startClientX - currentClientX;\n      if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {\n        return wrapWidth - COLUMN_MIN_WIDTH;\n      } else {\n        return offset;\n      }\n    },\n    [wrapWidth],\n  );\n\n  return (\n    <div\n      ref={dragElRef}\n      onMouseDown={(event) => {\n        mouseDownRef.current = {\n          clientX: event.clientX,\n          down: true,\n        };\n        setShow(true);\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n      }}\n      style={{ right: dragBarLeft, height: headerHeight }}\n      className={cn(\n        'ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--semantic-brand-500)]',\n        {\n          'ald-data-preview-header-drag-bar-active tw-bg-[var(--semantic-brand-500)]':\n            show,\n        },\n      )}\n    >\n      {show\n        ? createPortal(\n            <Mask\n              onMouseMove={(event) => {\n                const mouseDownState = mouseDownRef.current;\n                if (mouseDownState.down === false) return;\n                const currentClientX = event.clientX;\n                flushSync(() => {\n                  setDragBarLeft(getBarLeft(currentClientX));\n                });\n              }}\n              onMouseUp={(event) => {\n                mouseDownRef.current.down = false;\n                setShow(false);\n                const currentClientX = event.clientX;\n                onChange(columnId, wrapWidth - getBarLeft(currentClientX));\n                setDragBarLeft(0);\n              }}\n            ></Mask>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\nexport default memo(DragBar);\n"],"mappings":";;;;;;AAKA,SAAS,QAAQ,OAKd;CACD,MAAM,EAAE,WAAW,UAAU,UAAU,iBAAiB;CACxD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,eAAe,OAAO;EAC1B,MAAM;EACN,SAAS;EACV,CAAC;CACF,MAAM,aAAa,aAChB,mBAA2B;EAE1B,MAAM,SADe,aAAa,QAAQ,UACZ;AAC9B,MAAI,UAAU,YAAA,GACZ,QAAO,YAAA;MAEP,QAAO;IAGX,CAAC,UAAU,CACZ;AAED,QACE,oBAAC,OAAD;EACE,KAAK;EACL,cAAc,UAAU;AACtB,gBAAa,UAAU;IACrB,SAAS,MAAM;IACf,MAAM;IACP;AACD,WAAQ,KAAK;;EAEf,UAAU,MAAM;AACd,KAAE,iBAAiB;;EAErB,OAAO;GAAE,OAAO;GAAa,QAAQ;GAAc;EACnD,WAAW,GACT,2JACA,EACE,6EACE,MACH,CACF;YAEA,OACG,aACE,oBAAC,MAAD;GACE,cAAc,UAAU;AAEtB,QADuB,aAAa,QACjB,SAAS,MAAO;IACnC,MAAM,iBAAiB,MAAM;AAC7B,oBAAgB;AACd,oBAAe,WAAW,eAAe,CAAC;MAC1C;;GAEJ,YAAY,UAAU;AACpB,iBAAa,QAAQ,OAAO;AAC5B,YAAQ,MAAM;IACd,MAAM,iBAAiB,MAAM;AAC7B,aAAS,UAAU,YAAY,WAAW,eAAe,CAAC;AAC1D,mBAAe,EAAE;;GAEb,CAAA,EACR,SAAS,KACV,GACD;EACA,CAAA;;AAGV,IAAA,kBAAe,KAAK,QAAQ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/DragBar/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport React, { memo, useCallback, useRef, useState } from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { COLUMN_MIN_WIDTH } from '../../constant';\nimport Mask from './Mask';\nfunction DragBar(props: {\n  wrapWidth: number;\n  columnId: string;\n  onChange: (columnId: string, width: number) => void;\n  headerHeight: number;\n}) {\n  const { wrapWidth, columnId, onChange, headerHeight } = props;\n  const [show, setShow] = useState(false);\n  const [dragBarLeft, setDragBarLeft] = useState(0);\n  const dragElRef = useRef<HTMLDivElement>(null);\n  const mouseDownRef = useRef({\n    down: false,\n    clientX: 0,\n  });\n  const getBarLeft = useCallback(\n    (currentClientX: number) => {\n      const startClientX = mouseDownRef.current.clientX;\n      const offset = startClientX - currentClientX;\n      if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {\n        return wrapWidth - COLUMN_MIN_WIDTH;\n      } else {\n        return offset;\n      }\n    },\n    [wrapWidth],\n  );\n\n  return (\n    <div\n      ref={dragElRef}\n      onMouseDown={(event) => {\n        mouseDownRef.current = {\n          clientX: event.clientX,\n          down: true,\n        };\n        setShow(true);\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n      }}\n      style={{ right: dragBarLeft, height: headerHeight }}\n      className={cn(\n        'ald-data-preview-header-drag-bar tw-absolute tw-right-0 tw-top-0 tw-z-[2] tw-w-[3px] hover:tw-cursor-col-resize hover:tw-bg-[var(--border-brand-strong)]',\n        {\n          'ald-data-preview-header-drag-bar-active tw-bg-[var(--border-brand-strong)]':\n            show,\n        },\n      )}\n    >\n      {show\n        ? createPortal(\n            <Mask\n              onMouseMove={(event) => {\n                const mouseDownState = mouseDownRef.current;\n                if (mouseDownState.down === false) return;\n                const currentClientX = event.clientX;\n                flushSync(() => {\n                  setDragBarLeft(getBarLeft(currentClientX));\n                });\n              }}\n              onMouseUp={(event) => {\n                mouseDownRef.current.down = false;\n                setShow(false);\n                const currentClientX = event.clientX;\n                onChange(columnId, wrapWidth - getBarLeft(currentClientX));\n                setDragBarLeft(0);\n              }}\n            ></Mask>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\nexport default memo(DragBar);\n"],"mappings":";;;;;;AAKA,SAAS,QAAQ,OAKd;CACD,MAAM,EAAE,WAAW,UAAU,UAAU,iBAAiB;CACxD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,eAAe,OAAO;EAC1B,MAAM;EACN,SAAS;EACV,CAAC;CACF,MAAM,aAAa,aAChB,mBAA2B;EAE1B,MAAM,SADe,aAAa,QAAQ,UACZ;AAC9B,MAAI,UAAU,YAAA,GACZ,QAAO,YAAA;MAEP,QAAO;IAGX,CAAC,UAAU,CACZ;AAED,QACE,oBAAC,OAAD;EACE,KAAK;EACL,cAAc,UAAU;AACtB,gBAAa,UAAU;IACrB,SAAS,MAAM;IACf,MAAM;IACP;AACD,WAAQ,KAAK;;EAEf,UAAU,MAAM;AACd,KAAE,iBAAiB;;EAErB,OAAO;GAAE,OAAO;GAAa,QAAQ;GAAc;EACnD,WAAW,GACT,4JACA,EACE,8EACE,MACH,CACF;YAEA,OACG,aACE,oBAAC,MAAD;GACE,cAAc,UAAU;AAEtB,QADuB,aAAa,QACjB,SAAS,MAAO;IACnC,MAAM,iBAAiB,MAAM;AAC7B,oBAAgB;AACd,oBAAe,WAAW,eAAe,CAAC;MAC1C;;GAEJ,YAAY,UAAU;AACpB,iBAAa,QAAQ,OAAO;AAC5B,YAAQ,MAAM;IACd,MAAM,iBAAiB,MAAM;AAC7B,aAAS,UAAU,YAAY,WAAW,eAAe,CAAC;AAC1D,mBAAe,EAAE;;GAEb,CAAA,EACR,SAAS,KACV,GACD;EACA,CAAA;;AAGV,IAAA,kBAAe,KAAK,QAAQ"}

package/dist/DataPreviewTable/components/Header/index.js

@@ -18,12 +18,12 @@ function Header(props) {
 				position: "absolute"
 			};
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn("ald-data-preview-header-cell", "tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--alias-colors-border-default)]", "tw-bg-[var(--alias-colors-bg-skeleton-subtle)] tw-font-medium tw-text-[var(--alias-colors-text-strong)]"),
+				className: cn("ald-data-preview-header-cell", "tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-default)]", "tw-bg-[var(--background-neutral-surface)] tw-font-medium tw-text-[var(--content-primary)]"),
 				style,
 				children: [innerCell ? innerCell : /* @__PURE__ */ jsxs("div", {
-					className: "ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--alias-colors-bg-skeleton-subtle)] tw-p-1 tw-leading-6",
+					className: "ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--background-neutral-surface)] tw-p-1 tw-leading-6",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--alias-colors-icon-subtle)]",
+						className: "ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--content-secondary)]",
 						children: column.icon !== void 0 ? column.icon : /* @__PURE__ */ jsx("span", {})
 					}), /* @__PURE__ */ jsx("div", {
 						className: "ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left",

package/dist/DataPreviewTable/components/Header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Header/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { IColumnLayout, PreviewColumn } from '../../interface';\nimport DragBar from '../DragBar';\ninterface IHeader {\n  contentWidth: number;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  setWidth: (columnId: string, width: number) => void;\n  columnRange: [number, number];\n  headerHeight: number;\n}\nexport default function Header(props: IHeader) {\n  const {\n    contentWidth,\n    columns,\n    columnLayout,\n    setWidth,\n    columnRange: [startIndex, endIndex],\n    headerHeight,\n  } = props;\n  return (\n    <div\n      className=\"ald-data-preview-header tw-z-[2] tw-w-full\"\n      style={{ width: contentWidth }}\n    >\n      {columns.slice(startIndex, endIndex + 1).map((column) => {\n        const innerCell = column.renderHeader?.(column);\n        const style: React.CSSProperties = {\n          height: headerHeight,\n          width: columnLayout[column.id].width,\n          top: 0,\n          left: columnLayout[column.id].left,\n          position: 'absolute',\n        };\n\n        return (\n          <div\n            className={cn(\n              'ald-data-preview-header-cell',\n              'tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--alias-colors-border-default)]',\n              'tw-bg-[var(--alias-colors-bg-skeleton-subtle)] tw-font-medium tw-text-[var(--alias-colors-text-strong)]',\n            )}\n            key={column.id}\n            style={style}\n          >\n            {innerCell ? (\n              innerCell\n            ) : (\n              <div className=\"ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--alias-colors-bg-skeleton-subtle)] tw-p-1 tw-leading-6\">\n                <div className=\"ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--alias-colors-icon-subtle)]\">\n                  {column.icon !== undefined ? column.icon : <span></span>}\n                </div>\n                <div className=\"ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left\">\n                  {column.name}\n                </div>\n              </div>\n            )}\n            <DragBar\n              columnId={column.id}\n              wrapWidth={columnLayout[column.id].width}\n              onChange={setWidth}\n              headerHeight={headerHeight}\n            ></DragBar>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAwB,OAAO,OAAgB;CAC7C,MAAM,EACJ,cACA,SACA,cACA,UACA,aAAa,CAAC,YAAY,WAC1B,iBACE;AACJ,QACE,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,OAAO,cAAc;YAE7B,QAAQ,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,WAAW;GACvD,MAAM,YAAY,OAAO,eAAe,OAAO;GAC/C,MAAM,QAA6B;IACjC,QAAQ;IACR,OAAO,aAAa,OAAO,IAAI;IAC/B,KAAK;IACL,MAAM,aAAa,OAAO,IAAI;IAC9B,UAAU;IACX;AAED,UACE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,gIACA,0GACD;IAEM;cAPT,CASG,YACC,YAEA,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,OAAO,SAAS,SAAY,OAAO,OAAO,oBAAC,QAAD,EAAa,CAAA;MACpD,CAAA,EACN,oBAAC,OAAD;MAAK,WAAU;gBACZ,OAAO;MACJ,CAAA,CACF;QAER,oBAAC,iBAAD;KACE,UAAU,OAAO;KACjB,WAAW,aAAa,OAAO,IAAI;KACnC,UAAU;KACI;KACL,CAAA,CACP;MArBC,OAAO,GAqBR;IAER;EACE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/DataPreviewTable/components/Header/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\nimport { IColumnLayout, PreviewColumn } from '../../interface';\nimport DragBar from '../DragBar';\ninterface IHeader {\n  contentWidth: number;\n  columns: PreviewColumn[];\n  columnLayout: IColumnLayout;\n  setWidth: (columnId: string, width: number) => void;\n  columnRange: [number, number];\n  headerHeight: number;\n}\nexport default function Header(props: IHeader) {\n  const {\n    contentWidth,\n    columns,\n    columnLayout,\n    setWidth,\n    columnRange: [startIndex, endIndex],\n    headerHeight,\n  } = props;\n  return (\n    <div\n      className=\"ald-data-preview-header tw-z-[2] tw-w-full\"\n      style={{ width: contentWidth }}\n    >\n      {columns.slice(startIndex, endIndex + 1).map((column) => {\n        const innerCell = column.renderHeader?.(column);\n        const style: React.CSSProperties = {\n          height: headerHeight,\n          width: columnLayout[column.id].width,\n          top: 0,\n          left: columnLayout[column.id].left,\n          position: 'absolute',\n        };\n\n        return (\n          <div\n            className={cn(\n              'ald-data-preview-header-cell',\n              'tw-flex tw-items-center tw-border tw-border-l-0 tw-border-t-0 tw-border-solid tw-border-[var(--border-default)]',\n              'tw-bg-[var(--background-neutral-surface)] tw-font-medium tw-text-[var(--content-primary)]',\n            )}\n            key={column.id}\n            style={style}\n          >\n            {innerCell ? (\n              innerCell\n            ) : (\n              <div className=\"ald-data-preview-header-default tw-flex tw-size-full tw-items-center tw-bg-[var(--background-neutral-surface)] tw-p-1 tw-leading-6\">\n                <div className=\"ald-data-preview-header-left tw-mr-1 tw-flex tw-h-full tw-items-center tw-justify-center tw-text-xs tw-text-[var(--content-secondary)]\">\n                  {column.icon !== undefined ? column.icon : <span></span>}\n                </div>\n                <div className=\"ald-data-preview-header-name tw-m-auto tw-truncate tw-text-left\">\n                  {column.name}\n                </div>\n              </div>\n            )}\n            <DragBar\n              columnId={column.id}\n              wrapWidth={columnLayout[column.id].width}\n              onChange={setWidth}\n              headerHeight={headerHeight}\n            ></DragBar>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAwB,OAAO,OAAgB;CAC7C,MAAM,EACJ,cACA,SACA,cACA,UACA,aAAa,CAAC,YAAY,WAC1B,iBACE;AACJ,QACE,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,OAAO,cAAc;YAE7B,QAAQ,MAAM,YAAY,WAAW,EAAE,CAAC,KAAK,WAAW;GACvD,MAAM,YAAY,OAAO,eAAe,OAAO;GAC/C,MAAM,QAA6B;IACjC,QAAQ;IACR,OAAO,aAAa,OAAO,IAAI;IAC/B,KAAK;IACL,MAAM,aAAa,OAAO,IAAI;IAC9B,UAAU;IACX;AAED,UACE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,mHACA,4FACD;IAEM;cAPT,CASG,YACC,YAEA,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,OAAO,SAAS,SAAY,OAAO,OAAO,oBAAC,QAAD,EAAa,CAAA;MACpD,CAAA,EACN,oBAAC,OAAD;MAAK,WAAU;gBACZ,OAAO;MACJ,CAAA,CACF;QAER,oBAAC,iBAAD;KACE,UAAU,OAAO;KACjB,WAAW,aAAa,OAAO,IAAI;KACnC,UAAU;KACI;KACL,CAAA,CACP;MArBC,OAAO,GAqBR;IAER;EACE,CAAA"}

package/dist/DataPreviewTable/index.js

@@ -50,7 +50,7 @@ var DataPreviewTable_default = memo(forwardRef(function(props, ref) {
 			width,
 			height
 		},
-		className: cn(props.className, "ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border", { "ald-data-preview-table-show-skeleton": dataStatus === "pending" }),
+		className: cn(props.className, "ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border", { "ald-data-preview-table-show-skeleton": dataStatus === "pending" }),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "ald-data-preview-progress tw-absolute tw-left-0 tw-top-0 tw-z-[3] tw-w-full",
 			children: /* @__PURE__ */ jsx(Progress_default, {

package/dist/DataPreviewTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/DataPreviewTable/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, {\n  forwardRef,\n  memo,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport Progress, { IProgressRef } from '../Progress';\nimport ScrollArea from '../ScrollArea';\nimport Spin from '../Spin';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport Body from './components/Body';\nimport Error from './components/Body/Error';\nimport Header from './components/Header';\nimport { CELL_HEIGHT, DEFAULT_HEADER_HEIGHT } from './constant';\nimport useDirection from './hooks/useDirection';\nimport { DataPreviewTableRef, ITableProps } from './interface';\n\nconst DataPreviewTable = forwardRef(function (\n  props: ITableProps,\n  ref: React.Ref<DataPreviewTableRef>,\n) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    columns = [],\n    datasource = [],\n    width,\n    height,\n    headerHeight = 0,\n    loading,\n    dataStatus,\n    errorMsg = t.DataPreviewTable.dataLoadFailed,\n  } = props;\n\n  const realHeaderHeight = Math.max(headerHeight, DEFAULT_HEADER_HEIGHT);\n  const contentHeight = useMemo(() => {\n    return datasource.length * CELL_HEIGHT + realHeaderHeight;\n  }, [datasource, realHeaderHeight]);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const progressRef = useRef<IProgressRef>(null);\n  const {\n    columnRange,\n    rowRange,\n    onScroll,\n    columnLayout,\n    setColumnsWidth,\n    tableColumns,\n    contentWidth,\n  } = useDirection(columns, wrapRef);\n\n  useImperativeHandle(ref, () => ({\n    scrollToColumnInView: (columnId: string) => {\n      // 实现scrollTo方法\n      const columnPos = columnLayout[columnId];\n      if (!columnPos) return;\n      // 根据容器的宽度，容器的scrollLeft，columnPos，判断当前列是否在可视区域内\n      const { scrollLeft } = wrapRef.current as HTMLDivElement;\n      const { left, width } = columnPos;\n      const containerWidth = wrapRef.current?.clientWidth || 0;\n      if (left < scrollLeft) {\n        // 左边不可见\n        wrapRef.current?.scrollTo({\n          left,\n          behavior: 'smooth',\n        });\n      } else if (left + width > scrollLeft + containerWidth) {\n        // 右边不可见\n        wrapRef.current?.scrollTo({\n          left: left + width - containerWidth,\n          behavior: 'smooth',\n        });\n      }\n    },\n    progressRestart: () => {\n      progressRef.current?.restart();\n    },\n  }));\n\n  const skeletonRows = useMemo(() => {\n    if (!wrapRef.current) return 0;\n    const rows = Math.ceil(\n      ((wrapRef.current?.clientHeight || 0) - realHeaderHeight) / CELL_HEIGHT,\n    );\n    return rows - 1 < 0 ? 0 : rows - 1;\n  }, [realHeaderHeight]);\n\n  return (\n    <div\n      style={{ width, height }}\n      className={cn(\n        props.className,\n        'ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border',\n        {\n          'ald-data-preview-table-show-skeleton': dataStatus === 'pending',\n        },\n      )}\n    >\n      <div className=\"ald-data-preview-progress tw-absolute tw-left-0 tw-top-0 tw-z-[3] tw-w-full\">\n        <Progress loading={!!loading} ref={progressRef} />\n      </div>\n      <ScrollArea\n        ref={wrapRef}\n        style={{ willChange: 'transform' }}\n        onViewportScroll={() => {\n          // const { scrollTop, scrollLeft } = e.target as HTMLDivElement;\n          onScroll();\n        }}\n      >\n        <div\n          style={{\n            height:\n              dataStatus === 'pending'\n                ? skeletonRows * CELL_HEIGHT + realHeaderHeight\n                : contentHeight,\n            position: 'relative',\n            width: 'fit-content',\n          }}\n        >\n          <div className=\"ald-data-preview-sticky tw-sticky tw-top-0 tw-z-[1]\">\n            <Header\n              contentWidth={contentWidth}\n              headerHeight={realHeaderHeight}\n              columns={tableColumns}\n              columnLayout={columnLayout}\n              setWidth={setColumnsWidth}\n              columnRange={columnRange}\n            />\n          </div>\n          {dataStatus === 'pending' && tableColumns.length > 0 && (\n            <div className=\"ald-data-preview-loading tw-fixed tw-flex tw-size-full tw-items-center tw-justify-center\">\n              <Spin />\n            </div>\n          )}\n          {dataStatus === 'success' && (\n            <Body\n              columns={tableColumns}\n              columnRange={columnRange}\n              columnLayout={columnLayout}\n              datasource={datasource}\n              rowRange={rowRange}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n          {dataStatus === 'error' && (\n            <Error\n              errorMsg={errorMsg}\n              wrapWidth={wrapRef.current?.clientWidth || 0}\n              wrapHeight={wrapRef.current?.clientHeight || 0}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n});\n\nexport default memo(DataPreviewTable);\n"],"mappings":";;;;;;;;;;;AAiKA,IAAA,2BAAe,KA7IU,WAAW,SAClC,OACA,KACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UAAU,EAAE,EACZ,aAAa,EAAE,EACf,OACA,QACA,eAAe,GACf,SACA,YACA,WAAW,EAAE,iBAAiB,mBAC5B;CAEJ,MAAM,mBAAmB,KAAK,IAAI,cAAA,GAAoC;CACtE,MAAM,gBAAgB,cAAc;AAClC,SAAO,WAAW,SAAA,KAAuB;IACxC,CAAC,YAAY,iBAAiB,CAAC;CAClC,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAqB,KAAK;CAC9C,MAAM,EACJ,aACA,UACA,UACA,cACA,iBACA,cACA,iBACE,aAAa,SAAS,QAAQ;AAElC,qBAAoB,YAAY;EAC9B,uBAAuB,aAAqB;GAE1C,MAAM,YAAY,aAAa;AAC/B,OAAI,CAAC,UAAW;GAEhB,MAAM,EAAE,eAAe,QAAQ;GAC/B,MAAM,EAAE,MAAM,UAAU;GACxB,MAAM,iBAAiB,QAAQ,SAAS,eAAe;AACvD,OAAI,OAAO,WAET,SAAQ,SAAS,SAAS;IACxB;IACA,UAAU;IACX,CAAC;YACO,OAAO,QAAQ,aAAa,eAErC,SAAQ,SAAS,SAAS;IACxB,MAAM,OAAO,QAAQ;IACrB,UAAU;IACX,CAAC;;EAGN,uBAAuB;AACrB,eAAY,SAAS,SAAS;;EAEjC,EAAE;CAEH,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,QAAQ,QAAS,QAAO;EAC7B,MAAM,OAAO,KAAK,OACd,QAAQ,SAAS,gBAAgB,KAAK,oBAAA,GACzC;AACD,SAAO,OAAO,IAAI,IAAI,IAAI,OAAO;IAChC,CAAC,iBAAiB,CAAC;AAEtB,QACE,qBAAC,OAAD;EACE,OAAO;GAAE;GAAO;GAAQ;EACxB,WAAW,GACT,MAAM,WACN,4KACA,EACE,wCAAwC,eAAe,WACxD,CACF;YARH,CAUE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,kBAAD;IAAU,SAAS,CAAC,CAAC;IAAS,KAAK;IAAe,CAAA;GAC9C,CAAA,EACN,oBAAC,oBAAD;GACE,KAAK;GACL,OAAO,EAAE,YAAY,aAAa;GAClC,wBAAwB;AAEtB,cAAU;;aAGZ,qBAAC,OAAD;IACE,OAAO;KACL,QACE,eAAe,YACX,eAAA,KAA6B,mBAC7B;KACN,UAAU;KACV,OAAO;KACR;cARH;KAUE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD;OACgB;OACd,cAAc;OACd,SAAS;OACK;OACd,UAAU;OACG;OACb,CAAA;MACE,CAAA;KACL,eAAe,aAAa,aAAa,SAAS,KACjD,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,YAAD,EAAQ,CAAA;MACJ,CAAA;KAEP,eAAe,aACd,oBAAC,cAAD;MACE,SAAS;MACI;MACC;MACF;MACF;MACV,cAAc;MACd,CAAA;KAEH,eAAe,WACd,oBAAC,eAAD;MACY;MACV,WAAW,QAAQ,SAAS,eAAe;MAC3C,YAAY,QAAQ,SAAS,gBAAgB;MAC7C,cAAc;MACd,CAAA;KAEA;;GACK,CAAA,CACT;;EAER,CAEmC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/DataPreviewTable/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, {\n  forwardRef,\n  memo,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport Progress, { IProgressRef } from '../Progress';\nimport ScrollArea from '../ScrollArea';\nimport Spin from '../Spin';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport Body from './components/Body';\nimport Error from './components/Body/Error';\nimport Header from './components/Header';\nimport { CELL_HEIGHT, DEFAULT_HEADER_HEIGHT } from './constant';\nimport useDirection from './hooks/useDirection';\nimport { DataPreviewTableRef, ITableProps } from './interface';\n\nconst DataPreviewTable = forwardRef(function (\n  props: ITableProps,\n  ref: React.Ref<DataPreviewTableRef>,\n) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const {\n    columns = [],\n    datasource = [],\n    width,\n    height,\n    headerHeight = 0,\n    loading,\n    dataStatus,\n    errorMsg = t.DataPreviewTable.dataLoadFailed,\n  } = props;\n\n  const realHeaderHeight = Math.max(headerHeight, DEFAULT_HEADER_HEIGHT);\n  const contentHeight = useMemo(() => {\n    return datasource.length * CELL_HEIGHT + realHeaderHeight;\n  }, [datasource, realHeaderHeight]);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const progressRef = useRef<IProgressRef>(null);\n  const {\n    columnRange,\n    rowRange,\n    onScroll,\n    columnLayout,\n    setColumnsWidth,\n    tableColumns,\n    contentWidth,\n  } = useDirection(columns, wrapRef);\n\n  useImperativeHandle(ref, () => ({\n    scrollToColumnInView: (columnId: string) => {\n      // 实现scrollTo方法\n      const columnPos = columnLayout[columnId];\n      if (!columnPos) return;\n      // 根据容器的宽度，容器的scrollLeft，columnPos，判断当前列是否在可视区域内\n      const { scrollLeft } = wrapRef.current as HTMLDivElement;\n      const { left, width } = columnPos;\n      const containerWidth = wrapRef.current?.clientWidth || 0;\n      if (left < scrollLeft) {\n        // 左边不可见\n        wrapRef.current?.scrollTo({\n          left,\n          behavior: 'smooth',\n        });\n      } else if (left + width > scrollLeft + containerWidth) {\n        // 右边不可见\n        wrapRef.current?.scrollTo({\n          left: left + width - containerWidth,\n          behavior: 'smooth',\n        });\n      }\n    },\n    progressRestart: () => {\n      progressRef.current?.restart();\n    },\n  }));\n\n  const skeletonRows = useMemo(() => {\n    if (!wrapRef.current) return 0;\n    const rows = Math.ceil(\n      ((wrapRef.current?.clientHeight || 0) - realHeaderHeight) / CELL_HEIGHT,\n    );\n    return rows - 1 < 0 ? 0 : rows - 1;\n  }, [realHeaderHeight]);\n\n  return (\n    <div\n      style={{ width, height }}\n      className={cn(\n        props.className,\n        'ald-data-preview-table tw-relative tw-box-border tw-border tw-border-solid tw-border-[var(--border-default)] tw-text-xs tw-tabular-nums [&_*]:tw-box-border',\n        {\n          'ald-data-preview-table-show-skeleton': dataStatus === 'pending',\n        },\n      )}\n    >\n      <div className=\"ald-data-preview-progress tw-absolute tw-left-0 tw-top-0 tw-z-[3] tw-w-full\">\n        <Progress loading={!!loading} ref={progressRef} />\n      </div>\n      <ScrollArea\n        ref={wrapRef}\n        style={{ willChange: 'transform' }}\n        onViewportScroll={() => {\n          // const { scrollTop, scrollLeft } = e.target as HTMLDivElement;\n          onScroll();\n        }}\n      >\n        <div\n          style={{\n            height:\n              dataStatus === 'pending'\n                ? skeletonRows * CELL_HEIGHT + realHeaderHeight\n                : contentHeight,\n            position: 'relative',\n            width: 'fit-content',\n          }}\n        >\n          <div className=\"ald-data-preview-sticky tw-sticky tw-top-0 tw-z-[1]\">\n            <Header\n              contentWidth={contentWidth}\n              headerHeight={realHeaderHeight}\n              columns={tableColumns}\n              columnLayout={columnLayout}\n              setWidth={setColumnsWidth}\n              columnRange={columnRange}\n            />\n          </div>\n          {dataStatus === 'pending' && tableColumns.length > 0 && (\n            <div className=\"ald-data-preview-loading tw-fixed tw-flex tw-size-full tw-items-center tw-justify-center\">\n              <Spin />\n            </div>\n          )}\n          {dataStatus === 'success' && (\n            <Body\n              columns={tableColumns}\n              columnRange={columnRange}\n              columnLayout={columnLayout}\n              datasource={datasource}\n              rowRange={rowRange}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n          {dataStatus === 'error' && (\n            <Error\n              errorMsg={errorMsg}\n              wrapWidth={wrapRef.current?.clientWidth || 0}\n              wrapHeight={wrapRef.current?.clientHeight || 0}\n              headerHeight={realHeaderHeight}\n            />\n          )}\n        </div>\n      </ScrollArea>\n    </div>\n  );\n});\n\nexport default memo(DataPreviewTable);\n"],"mappings":";;;;;;;;;;;AAiKA,IAAA,2BAAe,KA7IU,WAAW,SAClC,OACA,KACA;CACA,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;CAE/B,MAAM,EACJ,UAAU,EAAE,EACZ,aAAa,EAAE,EACf,OACA,QACA,eAAe,GACf,SACA,YACA,WAAW,EAAE,iBAAiB,mBAC5B;CAEJ,MAAM,mBAAmB,KAAK,IAAI,cAAA,GAAoC;CACtE,MAAM,gBAAgB,cAAc;AAClC,SAAO,WAAW,SAAA,KAAuB;IACxC,CAAC,YAAY,iBAAiB,CAAC;CAClC,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAqB,KAAK;CAC9C,MAAM,EACJ,aACA,UACA,UACA,cACA,iBACA,cACA,iBACE,aAAa,SAAS,QAAQ;AAElC,qBAAoB,YAAY;EAC9B,uBAAuB,aAAqB;GAE1C,MAAM,YAAY,aAAa;AAC/B,OAAI,CAAC,UAAW;GAEhB,MAAM,EAAE,eAAe,QAAQ;GAC/B,MAAM,EAAE,MAAM,UAAU;GACxB,MAAM,iBAAiB,QAAQ,SAAS,eAAe;AACvD,OAAI,OAAO,WAET,SAAQ,SAAS,SAAS;IACxB;IACA,UAAU;IACX,CAAC;YACO,OAAO,QAAQ,aAAa,eAErC,SAAQ,SAAS,SAAS;IACxB,MAAM,OAAO,QAAQ;IACrB,UAAU;IACX,CAAC;;EAGN,uBAAuB;AACrB,eAAY,SAAS,SAAS;;EAEjC,EAAE;CAEH,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,QAAQ,QAAS,QAAO;EAC7B,MAAM,OAAO,KAAK,OACd,QAAQ,SAAS,gBAAgB,KAAK,oBAAA,GACzC;AACD,SAAO,OAAO,IAAI,IAAI,IAAI,OAAO;IAChC,CAAC,iBAAiB,CAAC;AAEtB,QACE,qBAAC,OAAD;EACE,OAAO;GAAE;GAAO;GAAQ;EACxB,WAAW,GACT,MAAM,WACN,+JACA,EACE,wCAAwC,eAAe,WACxD,CACF;YARH,CAUE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,kBAAD;IAAU,SAAS,CAAC,CAAC;IAAS,KAAK;IAAe,CAAA;GAC9C,CAAA,EACN,oBAAC,oBAAD;GACE,KAAK;GACL,OAAO,EAAE,YAAY,aAAa;GAClC,wBAAwB;AAEtB,cAAU;;aAGZ,qBAAC,OAAD;IACE,OAAO;KACL,QACE,eAAe,YACX,eAAA,KAA6B,mBAC7B;KACN,UAAU;KACV,OAAO;KACR;cARH;KAUE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD;OACgB;OACd,cAAc;OACd,SAAS;OACK;OACd,UAAU;OACG;OACb,CAAA;MACE,CAAA;KACL,eAAe,aAAa,aAAa,SAAS,KACjD,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,YAAD,EAAQ,CAAA;MACJ,CAAA;KAEP,eAAe,aACd,oBAAC,cAAD;MACE,SAAS;MACI;MACC;MACF;MACF;MACV,cAAc;MACd,CAAA;KAEH,eAAe,WACd,oBAAC,eAAD;MACY;MACV,WAAW,QAAQ,SAAS,eAAe;MAC3C,YAAY,QAAQ,SAAS,gBAAgB;MAC7C,cAAc;MACd,CAAA;KAEA;;GACK,CAAA,CACT;;EAER,CAEmC"}

package/dist/Divider/index.js

@@ -11,7 +11,7 @@ var dividerVariants = cva("ald-divider tw-inline-block tw-w-px tw-align-middle",
 	} },
 	defaultVariants: { size: "middle" }
 });
-var innerVariants = cva("ald-divider-inner tw-block tw-w-full tw-bg-[var(--global-cool-grey-300)] tw-mix-blend-multiply", {
+var innerVariants = cva("ald-divider-inner tw-block tw-w-full tw-bg-[var(--border-neutral-subtle)] tw-mix-blend-multiply", {
 	variants: { size: {
 		small: "tw-h-[12px]",
 		middle: "tw-h-[14px]",

package/dist/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Divider/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IDividerProps {\n  /**\n   * @description 类名\n   * @type string\n   * @default --\n   */\n  className?: string;\n  /**\n   * @description 颜色\n   * @type string\n   * @default --\n   */\n  color?: string;\n  /**\n   * @description 尺寸\n   * @type 'small' | 'middle' | 'large'\n   * @default 'middle'\n   */\n  size?: 'small' | 'middle' | 'large';\n}\n\nconst dividerVariants = cva(\n  'ald-divider tw-inline-block tw-w-px tw-align-middle',\n  {\n    variants: {\n      size: {\n        small: 'ald-divider-small tw-mx-[6px]',\n        middle: 'ald-divider-middle tw-mx-[8px]',\n        large: 'ald-divider-large tw-mx-[12px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  'ald-divider-inner tw-block tw-w-full tw-bg-[var(--global-cool-grey-300)] tw-mix-blend-multiply',\n  {\n    variants: {\n      size: {\n        small: 'tw-h-[12px]',\n        middle: 'tw-h-[14px]',\n        large: 'tw-h-[16px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst Divider = (props: IDividerProps) => {\n  const { className, size = 'middle' } = props;\n\n  return (\n    <div className={cn(dividerVariants({ size }), className)}>\n      <div\n        className={innerVariants({ size })}\n        style={props.color ? { backgroundColor: props.color } : undefined}\n      />\n    </div>\n  );\n};\n\nexport default Divider;\n"],"mappings":";;;;;AAyBA,IAAM,kBAAkB,IACtB,uDACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,WAAW,UAAyB;CACxC,MAAM,EAAE,WAAW,OAAO,aAAa;AAEvC,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,EAAE,MAAM,CAAC,EAAE,UAAU;YACtD,oBAAC,OAAD;GACE,WAAW,cAAc,EAAE,MAAM,CAAC;GAClC,OAAO,MAAM,QAAQ,EAAE,iBAAiB,MAAM,OAAO,GAAG;GACxD,CAAA;EACE,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Divider/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface IDividerProps {\n  /**\n   * @description 类名\n   * @type string\n   * @default --\n   */\n  className?: string;\n  /**\n   * @description 颜色\n   * @type string\n   * @default --\n   */\n  color?: string;\n  /**\n   * @description 尺寸\n   * @type 'small' | 'middle' | 'large'\n   * @default 'middle'\n   */\n  size?: 'small' | 'middle' | 'large';\n}\n\nconst dividerVariants = cva(\n  'ald-divider tw-inline-block tw-w-px tw-align-middle',\n  {\n    variants: {\n      size: {\n        small: 'ald-divider-small tw-mx-[6px]',\n        middle: 'ald-divider-middle tw-mx-[8px]',\n        large: 'ald-divider-large tw-mx-[12px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  'ald-divider-inner tw-block tw-w-full tw-bg-[var(--border-neutral-subtle)] tw-mix-blend-multiply',\n  {\n    variants: {\n      size: {\n        small: 'tw-h-[12px]',\n        middle: 'tw-h-[14px]',\n        large: 'tw-h-[16px]',\n      },\n    },\n    defaultVariants: {\n      size: 'middle',\n    },\n  },\n);\n\nconst Divider = (props: IDividerProps) => {\n  const { className, size = 'middle' } = props;\n\n  return (\n    <div className={cn(dividerVariants({ size }), className)}>\n      <div\n        className={innerVariants({ size })}\n        style={props.color ? { backgroundColor: props.color } : undefined}\n      />\n    </div>\n  );\n};\n\nexport default Divider;\n"],"mappings":";;;;;AAyBA,IAAM,kBAAkB,IACtB,uDACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,gBAAgB,IACpB,mGACA;CACE,UAAU,EACR,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CACF;AAED,IAAM,WAAW,UAAyB;CACxC,MAAM,EAAE,WAAW,OAAO,aAAa;AAEvC,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,EAAE,MAAM,CAAC,EAAE,UAAU;YACtD,oBAAC,OAAD;GACE,WAAW,cAAc,EAAE,MAAM,CAAC;GAClC,OAAO,MAAM,QAAQ,EAAE,iBAAiB,MAAM,OAAO,GAAG;GACxD,CAAA;EACE,CAAA"}

package/dist/Drawer/index.js

@@ -77,7 +77,7 @@ function Drawer(props) {
 		},
 		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [mask && /* @__PURE__ */ jsx("div", {
 			"data-state": open ? "open" : "closed",
-			className: "ald-drawer-mask tw-fixed tw-inset-0 tw-bg-black/45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
+			className: "ald-drawer-mask tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
 			style: { zIndex: maskZIndex },
 			onClick: maskClosable ? () => onClose?.() : void 0
 		}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
@@ -97,7 +97,7 @@ function Drawer(props) {
 				value: nextLevel,
 				children: [
 					(title || description || closable || extra) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-						className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--interaction-background-sidepanel)] tw-px-6 tw-pb-0 tw-pt-4",
+						className: "ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4",
 						style: headerStyle,
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "tw-flex tw-w-full tw-flex-col tw-gap-[6px]",
@@ -112,7 +112,7 @@ function Drawer(props) {
 										asChild: true,
 										children: /* @__PURE__ */ jsx("button", {
 											type: "button",
-											className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-transparent hover:tw-bg-[var(--action-ghost-hover)]",
+											className: "ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]",
 											onClick: () => onClose?.(),
 											children: /* @__PURE__ */ jsx(Memo, {
 												size: 20,

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useRef } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?: () => HTMLElement;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // ---- modal={false} 补偿：锁定背景滚动 ----\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {mask && (\n          <div\n            data-state={open ? 'open' : 'closed'}\n            className=\"ald-drawer-mask tw-fixed tw-inset-0 tw-bg-black/45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n            style={{ zIndex: maskZIndex }}\n            onClick={maskClosable ? () => onClose?.() : undefined}\n          />\n        )}\n        <DialogPrimitive.Content\n          ref={contentRef}\n          className={cn(\n            'ald-drawer tw-fixed tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n            placementStyles[placement],\n            slideAnimationStyles[placement],\n            rootClassName,\n            className,\n          )}\n          style={{\n            zIndex: contentZIndex,\n            ...sizeStyle,\n            ...contentWrapperStyle,\n            ...style,\n          }}\n          onEscapeKeyDown={() => onClose?.()}\n          onInteractOutside={(event) => {\n            if (!maskClosable) {\n              event.preventDefault();\n            }\n          }}\n        >\n          <FloatingLayerProvider value={nextLevel}>\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--interaction-background-sidepanel)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-transparent hover:tw-bg-[var(--action-ghost-hover)]\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                        {description}\n                      </div>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useRef } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?: () => HTMLElement;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // ---- modal={false} 补偿：锁定背景滚动 ----\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {mask && (\n          <div\n            data-state={open ? 'open' : 'closed'}\n            className=\"ald-drawer-mask tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n            style={{ zIndex: maskZIndex }}\n            onClick={maskClosable ? () => onClose?.() : undefined}\n          />\n        )}\n        <DialogPrimitive.Content\n          ref={contentRef}\n          className={cn(\n            'ald-drawer tw-fixed tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n            placementStyles[placement],\n            slideAnimationStyles[placement],\n            rootClassName,\n            className,\n          )}\n          style={{\n            zIndex: contentZIndex,\n            ...sizeStyle,\n            ...contentWrapperStyle,\n            ...style,\n          }}\n          onEscapeKeyDown={() => onClose?.()}\n          onInteractOutside={(event) => {\n            if (!maskClosable) {\n              event.preventDefault();\n            }\n          }}\n        >\n          <FloatingLayerProvider value={nextLevel}>\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                        {description}\n                      </div>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/Dropdown/index.d.ts

@@ -51,6 +51,11 @@ export interface IDropdownProps {
      * @default -
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * @description 焦点移出触发元素和浮层时是否关闭 Dropdown
+     * @default true
+     */
+    closeOnFocusOut?: boolean;
     /**
      * @description 下拉框外层 overlay 的内联样式（与定位 transform 合并）
      * @default -

package/dist/Dropdown/index.js

@@ -31,7 +31,7 @@ function hasTrigger(trigger, action) {
 	return Array.isArray(trigger) ? trigger.includes(action) : trigger === action;
 }
 function Dropdown(props) {
-	const { children, destroyPopupOnHide = true, getPopupContainer, menu, overlayClassName, placement = "bottom-start", trigger = "click", open, onOpenChange = () => {}, overlayStyle, overlayInnerStyle, dropdownRender, disabled, offset: offsetProps = 4, delay = 0, autoUpdatePos = false, initialFocus = -1, popupMatchTriggerWidth = false, allowOverlap = false } = props;
+	const { children, destroyPopupOnHide = true, getPopupContainer, menu, overlayClassName, placement = "bottom-start", trigger = "click", open, onOpenChange = () => {}, closeOnFocusOut = true, overlayStyle, overlayInnerStyle, dropdownRender, disabled, offset: offsetProps = 4, delay = 0, autoUpdatePos = false, initialFocus = -1, popupMatchTriggerWidth = false, allowOverlap = false } = props;
 	const [isOpen, setIsOpen] = useState(open || false);
 	const [isAnimatingOut, setIsAnimatingOut] = useState(false);
 	const closeAnimationTimerRef = useRef(null);
@@ -300,6 +300,7 @@ function Dropdown(props) {
 			context,
 			modal: false,
 			initialFocus,
+			closeOnFocusOut,
 			children: surface
 		});
 		const popupContainer = typeof getPopupContainer === "function" ? getPopupContainer() : document.body;
@@ -321,6 +322,7 @@ function Dropdown(props) {
 		isAnimatingOut,
 		isOpen,
 		initialFocus,
+		closeOnFocusOut,
 		resolvedFloatingSide,
 		resolvedFloatingStyles
 	]);

package/dist/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Dropdown/index.tsx"],"sourcesContent":["import './dropdown.css';\nimport {\n  FloatingFocusManager,\n  FloatingFocusManagerProps,\n  FloatingNode,\n  FloatingTree,\n  OffsetOptions,\n  UseHoverProps,\n  autoUpdate,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useMemoizedFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport Menu, { MenuInfo, MenuProps } from '../Menu';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { ensureWeakRefFallback } from '../_utils/weakRefFallback';\n\nconst OVERLAY_EXIT_ANIMATION_MS = 200;\n\nensureWeakRefFallback();\n\nfunction resolvePlacementSide(\n  currentPlacement: string,\n): 'top' | 'bottom' | 'left' | 'right' {\n  const [side] = currentPlacement.split('-');\n  if (\n    side === 'top' ||\n    side === 'bottom' ||\n    side === 'left' ||\n    side === 'right'\n  ) {\n    return side;\n  }\n  if (currentPlacement.startsWith('top')) {\n    return 'top';\n  }\n  if (currentPlacement.startsWith('bottom')) {\n    return 'bottom';\n  }\n  if (currentPlacement.startsWith('left')) {\n    return 'left';\n  }\n  if (currentPlacement.startsWith('right')) {\n    return 'right';\n  }\n  return 'bottom';\n}\n\nfunction parsePopupMatchWidth(value: unknown): number | undefined {\n  if (typeof value === 'number') {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const parsedValue = Number(value);\n    return Number.isNaN(parsedValue) ? undefined : parsedValue;\n  }\n\n  return undefined;\n}\n\nexport type ActionType = 'hover' | 'click';\nexport type PlacementType =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end'\n  // Legacy antd-style placement names\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight';\nexport interface IDropdownProps {\n  children: React.ReactNode;\n  /**\n   * @description 菜单弹出位置的偏移量\n   */\n  offset?: OffsetOptions;\n  /**\n   * @description 关闭后是否销毁 Dropdown\n   * @default false\n   */\n  destroyPopupOnHide?: boolean;\n  /**\n   * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位\n   * @default () => document.body\n   */\n  getPopupContainer?: () => HTMLElement;\n  /**\n   * @description 菜单\n   * @type Menu | () => Menu\n   * @default -\n   */\n  menu?: MenuProps;\n  // /**\n  //  * @description 菜单\n  //  * @type Menu | () => Menu\n  //  * @default -\n  //  */\n  // menu?: ReactElement | (() => ReactElement);\n  /**\n   * @description 下拉根元素的类名称\n   * @default -\n   */\n  overlayClassName?: string;\n  /**\n   * @description 菜单弹出位置\n   * @default bottomLeft\n   */\n  placement?: PlacementType;\n  /**\n   * @description 触发下拉的行为\n   * @type ActionType, 其中 ActionType 为 'hover' | 'click' | 'contextMenu';\n   * @default click\n   */\n  trigger?: ActionType | ActionType[];\n  /**\n   * @description 菜单是否显示\n   * @default -\n   */\n  open?: boolean;\n  /**\n   * @description 菜单显示状态改变时调用，参数为 open，点击菜单按钮导致的消失不会触发\n   * @default -\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * @description 下拉框外层 overlay 的内联样式（与定位 transform 合并）\n   * @default -\n   */\n  overlayStyle?: React.CSSProperties;\n  /**\n   * @description 下拉框内层 surface 的内联样式。\n   * 用于覆盖 surface 默认约束（默认 min-width:160px、max-width:320px）；\n   * 自定义 dropdownRender 内容若需大于 320px 宽，传 `{ width: 400, maxWidth: 'none' }` 即可。\n   * @default -\n   */\n  overlayInnerStyle?: React.CSSProperties;\n\n  /**\n   * @description 自定义下拉框内容\n   * @default -\n   */\n  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;\n  /**\n   * @description 是否禁用\n   * @default false\n   */\n  // 透传给子元素，antd的dropdown用cloneElement生成dropdown的子元素，劫持了disabled属性，因此如果Dropdown上没有disabled属性，子元素不能获得该属性\n  disabled?: boolean;\n  /**\n   * @description 鼠标移入后延迟显示下拉框的时间，单位为毫秒\n   * @default 0\n   */\n  delay?: UseHoverProps['delay'];\n  /**\n   * @description 是否在下拉框变化的时候自动更新位置\n   * @default false\n   */\n  autoUpdatePos?: boolean;\n  /**\n   * @description 初始化焦点，参照：https://floating-ui.com/docs/floatingfocusmanager#initialfocus\n   */\n  initialFocus?: FloatingFocusManagerProps['initialFocus'];\n\n  /**\n   * @description 菜单是否跟随触发元素宽度\n   * @default false\n   */\n  popupMatchTriggerWidth?: boolean | number;\n  /**\n   * @description 空间不足时自动计算菜单最大高度并启用滚动，启用后 offset 固定为 0\n   * @default false\n   */\n  allowOverlap?: boolean;\n}\n\nfunction hasTrigger(\n  trigger: ActionType | ActionType[],\n  action: ActionType,\n): boolean {\n  return Array.isArray(trigger) ? trigger.includes(action) : trigger === action;\n}\n\nexport default function Dropdown(props: IDropdownProps) {\n  const {\n    children,\n    destroyPopupOnHide = true,\n    getPopupContainer,\n    menu,\n    overlayClassName,\n    placement = 'bottom-start',\n    trigger = 'click',\n    open,\n    onOpenChange = () => {},\n    overlayStyle,\n    overlayInnerStyle,\n    dropdownRender,\n    disabled,\n    offset: offsetProps = 4,\n    delay = 0,\n    autoUpdatePos = false,\n    // 默认不自动 focus\n    initialFocus = -1,\n    popupMatchTriggerWidth = false,\n    allowOverlap = false,\n  } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(open || false);\n  const [isAnimatingOut, setIsAnimatingOut] = useState(false);\n  const closeAnimationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n  const lastResolvedFloatingStylesRef = useRef<React.CSSProperties | null>(\n    null,\n  );\n  const lastResolvedSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const currentFloatingStylesRef = useRef<React.CSSProperties | null>(null);\n  const currentFloatingSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n  const popupMatchTriggerWidthNumber = parsePopupMatchWidth(\n    popupMatchTriggerWidth,\n  );\n  const [matchedTriggerWidth, setMatchedTriggerWidth] = useState<\n    number | undefined\n  >(popupMatchTriggerWidthNumber);\n  const popupZIndex = useFloatingPopupZIndex();\n\n  const onOpenChangeFn = useMemoizedFn(onOpenChange);\n  const isOpenControlled = open !== undefined;\n\n  const clearCloseAnimationTimer = useCallback(() => {\n    if (closeAnimationTimerRef.current) {\n      clearTimeout(closeAnimationTimerRef.current);\n      closeAnimationTimerRef.current = null;\n    }\n  }, []);\n\n  const stopCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    document.body.classList.remove('ald-dropdown-root-closing');\n    setIsAnimatingOut(false);\n  }, [clearCloseAnimationTimer]);\n\n  const markRootClosing = useCallback(() => {\n    document.body.classList.add('ald-dropdown-root-closing');\n    lastResolvedFloatingStylesRef.current =\n      currentFloatingStylesRef.current ?? lastResolvedFloatingStylesRef.current;\n    lastResolvedSideRef.current =\n      currentFloatingSideRef.current ?? lastResolvedSideRef.current;\n  }, []);\n\n  const startCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    markRootClosing();\n    setIsAnimatingOut(true);\n    closeAnimationTimerRef.current = setTimeout(() => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n      setIsAnimatingOut(false);\n      closeAnimationTimerRef.current = null;\n    }, OVERLAY_EXIT_ANIMATION_MS);\n  }, [clearCloseAnimationTimer, markRootClosing]);\n\n  useLayoutEffect(() => {\n    if (!isOpenControlled) {\n      return;\n    }\n\n    if (open) {\n      stopCloseAnimation();\n      setIsOpen(true);\n      return;\n    }\n\n    if (isOpen) {\n      startCloseAnimation();\n    }\n    setIsOpen(false);\n  }, [isOpen, isOpenControlled, open, startCloseAnimation, stopCloseAnimation]);\n\n  useEffect(() => {\n    return () => {\n      clearCloseAnimationTimer();\n    };\n  }, [clearCloseAnimationTimer]);\n\n  useEffect(() => {\n    return () => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n    };\n  }, []);\n\n  const onChangeOpen = useCallback(\n    (newOpen: boolean) => {\n      if (newOpen) {\n        stopCloseAnimation();\n      } else {\n        startCloseAnimation();\n      }\n\n      if (!isOpenControlled) {\n        setIsOpen(newOpen);\n      }\n      onOpenChangeFn(newOpen);\n    },\n    [isOpenControlled, onOpenChangeFn, startCloseAnimation, stopCloseAnimation],\n  );\n\n  const nodeId = useFloatingNodeId();\n  const {\n    refs,\n    floatingStyles,\n    context,\n    placement: floatingPlacement,\n    x,\n    y,\n  } = useFloating({\n    nodeId,\n    placement: placement as any,\n    open: isOpen,\n    onOpenChange: onChangeOpen,\n    middleware: [\n      offset(allowOverlap ? 0 : offsetProps),\n      flip({\n        fallbackAxisSideDirection: 'end',\n        ...(allowOverlap && { fallbackStrategy: 'bestFit' }),\n      }),\n      shift(allowOverlap ? { mainAxis: true } : undefined),\n      size({\n        ...(allowOverlap && { padding: 8 }),\n        apply({ availableHeight, elements }) {\n          if (!allowOverlap) {\n            return;\n          }\n\n          Object.assign(elements.floating.style, {\n            maxHeight: `${Math.max(100, availableHeight)}px`,\n            overflowY: 'auto',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdatePos ? autoUpdate : undefined,\n  });\n\n  const click = useClick(context, {\n    enabled: hasTrigger(trigger, 'click'),\n  });\n  const hover = useHover(context, {\n    enabled: hasTrigger(trigger, 'hover'),\n    handleClose: safePolygon({}),\n    delay: delay,\n  });\n  const dismiss = useDismiss(context, {});\n  const role = useRole(context);\n\n  const propsList = useMemo(() => {\n    const res = [dismiss, role];\n\n    if (hasTrigger(trigger, 'hover')) {\n      res.unshift(hover);\n    }\n    if (hasTrigger(trigger, 'click')) {\n      res.unshift(click);\n    }\n    return res;\n  }, [trigger, click, dismiss, role, hover]);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions(propsList);\n\n  const headingId = useId();\n\n  useLayoutEffect(() => {\n    if (!popupMatchTriggerWidth || !isOpen) {\n      setMatchedTriggerWidth(undefined);\n      return;\n    }\n\n    if (popupMatchTriggerWidthNumber !== undefined) {\n      setMatchedTriggerWidth(popupMatchTriggerWidthNumber);\n      return;\n    }\n\n    const referenceElement = targetElement;\n    if (!referenceElement) {\n      return;\n    }\n\n    const updateMatchedWidth = () => {\n      const nextWidth = referenceElement.getBoundingClientRect().width;\n      setMatchedTriggerWidth((currentWidth) =>\n        currentWidth === nextWidth ? currentWidth : nextWidth,\n      );\n    };\n\n    updateMatchedWidth();\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', updateMatchedWidth);\n      return () => {\n        window.removeEventListener('resize', updateMatchedWidth);\n      };\n    }\n\n    let resizeAnimationFrame: number | undefined;\n    const scheduleMatchedWidthUpdate = () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      resizeAnimationFrame = requestAnimationFrame(updateMatchedWidth);\n    };\n\n    const observer = new ResizeObserver(scheduleMatchedWidthUpdate);\n    observer.observe(referenceElement);\n\n    return () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      observer.disconnect();\n    };\n  }, [\n    isOpen,\n    popupMatchTriggerWidth,\n    popupMatchTriggerWidthNumber,\n    targetElement,\n  ]);\n\n  const child = children as React.ReactElement;\n  const childProps = child.props || {};\n  const referenceProps = getReferenceProps();\n  const updateMatchedWidthFromElement = useCallback(\n    (element: HTMLElement) => {\n      if (!popupMatchTriggerWidth) {\n        return;\n      }\n\n      setMatchedTriggerWidth((currentWidth) => {\n        const nextWidth =\n          popupMatchTriggerWidthNumber !== undefined\n            ? popupMatchTriggerWidthNumber\n            : element.getBoundingClientRect().width;\n        return currentWidth === nextWidth ? currentWidth : nextWidth;\n      });\n    },\n    [popupMatchTriggerWidth, popupMatchTriggerWidthNumber],\n  );\n  const modifiedChild = cloneElement(child, {\n    ...childProps,\n    disabled,\n    // ref: (node: HTMLDivElement) => refs.setReference(node),\n    ...referenceProps,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      updateMatchedWidthFromElement(event.currentTarget);\n      childProps.onClick?.(event);\n      const { onClick: referenceOnClick } = referenceProps;\n      if (typeof referenceOnClick === 'function') {\n        referenceOnClick(event);\n      }\n    },\n  });\n\n  const onMenuItemClick = useCallback(\n    (info: MenuInfo) => {\n      if (menu?.onClick) {\n        menu.onClick(info);\n      }\n      if (info.keepOpen) {\n        document.body.classList.remove('ald-dropdown-root-closing');\n        return;\n      }\n      onChangeOpen(false);\n    },\n    [menu, onChangeOpen],\n  );\n\n  const menuInstance = useMemo(() => {\n    const menuProps = {\n      ...menu,\n      items: menu?.items || [],\n      menuStyle: {\n        ...(popupMatchTriggerWidth\n          ? {\n              width: '100%',\n              minWidth: 0,\n              maxWidth: 'none',\n            }\n          : undefined),\n        ...menu?.menuStyle,\n      },\n      onBeforeLeafItemClick: markRootClosing,\n      rootClosing: isAnimatingOut,\n    };\n    return (\n      <Menu\n        {...menuProps}\n        onClick={onMenuItemClick}\n        externalOverflow={allowOverlap}\n      />\n    );\n  }, [\n    allowOverlap,\n    isAnimatingOut,\n    markRootClosing,\n    menu,\n    onMenuItemClick,\n    popupMatchTriggerWidth,\n  ]);\n\n  const popupElement = useMemo(() => {\n    return typeof dropdownRender === 'function'\n      ? dropdownRender(menuInstance)\n      : menuInstance;\n  }, [dropdownRender, menuInstance]);\n\n  const mergedMatchedTriggerWidth =\n    popupMatchTriggerWidthNumber ?? matchedTriggerWidth;\n  const matchedOverlayStyle =\n    popupMatchTriggerWidth && mergedMatchedTriggerWidth !== undefined\n      ? ({\n          width: `${mergedMatchedTriggerWidth}px`,\n          minWidth: 0,\n        } satisfies React.CSSProperties)\n      : undefined;\n\n  const matchedSurfaceStyle = popupMatchTriggerWidth\n    ? ({\n        width: '100%',\n        minWidth: 0,\n        maxWidth: 'none',\n      } satisfies React.CSSProperties)\n    : undefined;\n\n  const floatingSide = resolvePlacementSide(String(floatingPlacement));\n  const shouldKeepMounted = !destroyPopupOnHide || isOpen || isAnimatingOut;\n  const isPositionReady = x !== null && y !== null;\n  const overlayHidden =\n    (!isOpen && !isAnimatingOut) || (isOpen && !isPositionReady);\n  const resolvedFloatingStyles = isAnimatingOut\n    ? lastResolvedFloatingStylesRef.current ?? floatingStyles\n    : floatingStyles;\n  const resolvedFloatingSide = isAnimatingOut\n    ? lastResolvedSideRef.current\n    : floatingSide;\n\n  if (isOpen && isPositionReady) {\n    currentFloatingStylesRef.current = { ...floatingStyles };\n    currentFloatingSideRef.current = floatingSide;\n    lastResolvedFloatingStylesRef.current = { ...floatingStyles };\n    lastResolvedSideRef.current = floatingSide;\n  }\n\n  // 渲染浮动内容到自定义容器\n  const renderFloatingContent = useCallback(() => {\n    const surface = (\n      <div\n        {...(isAnimatingOut ? {} : getFloatingProps())}\n        className={cn(\n          'ald-dropdown-overlay',\n          // tw-outline-none：FloatingFocusManager 打开时会聚焦浮层容器，不抑制 outline 会渲染出蓝色焦点框\n          'tw-pointer-events-auto tw-z-[1001] tw-max-w-none tw-outline-none',\n          overlayClassName,\n          { 'ald-dropdown-overlay-hidden': overlayHidden },\n        )}\n        ref={refs.setFloating}\n        style={{\n          zIndex: popupZIndex,\n          ...resolvedFloatingStyles,\n          ...matchedOverlayStyle,\n          ...overlayStyle,\n        }}\n        aria-labelledby={headingId}\n      >\n        <div\n          className={cn(\n            'ald-dropdown-surface',\n            'tw-flex tw-flex-col tw-items-start tw-text-sm',\n          )}\n          style={{\n            ...matchedSurfaceStyle,\n            ...overlayInnerStyle,\n          }}\n          data-state={isOpen ? 'open' : 'closed'}\n          data-side={resolvedFloatingSide}\n        >\n          {popupElement}\n        </div>\n      </div>\n    );\n\n    const popupElem =\n      isAnimatingOut && !isOpen ? (\n        surface\n      ) : (\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          initialFocus={initialFocus}\n        >\n          {surface}\n        </FloatingFocusManager>\n      );\n\n    const popupContainer =\n      typeof getPopupContainer === 'function'\n        ? getPopupContainer()\n        : document.body;\n    return ReactDOM.createPortal(popupElem, popupContainer);\n  }, [\n    context,\n    getFloatingProps,\n    getPopupContainer,\n    headingId,\n    popupElement,\n    refs.setFloating,\n    overlayClassName,\n    overlayStyle,\n    overlayInnerStyle,\n    matchedOverlayStyle,\n    matchedSurfaceStyle,\n    popupZIndex,\n    overlayHidden,\n    isAnimatingOut,\n    isOpen,\n    initialFocus,\n    resolvedFloatingSide,\n    resolvedFloatingStyles,\n  ]);\n\n  const popup = shouldKeepMounted ? renderFloatingContent() : null;\n  const { setReference } = refs;\n\n  const setTargetRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) {\n        // display: contents 元素没有 box model，getBoundingClientRect() 返回零值\n        // 需要获取实际的第一个子元素作为 floating-ui 的参考元素\n        const target =\n          node.style.display === 'contents'\n            ? (node.firstElementChild as HTMLElement) || node\n            : node;\n        setTargetElement((currentTarget) =>\n          currentTarget === target ? currentTarget : target,\n        );\n        setReference(target);\n      } else {\n        setTargetElement(null);\n        setReference(null);\n      }\n    },\n    [setReference],\n  );\n\n  const content = (\n    <>\n      <span ref={setTargetRef} style={{ display: 'contents' }}>\n        {modifiedChild}\n      </span>\n      <FloatingNode id={nodeId}>{popup}</FloatingNode>\n    </>\n  );\n\n  const parentId = useFloatingParentNodeId();\n  if (!parentId) {\n    return <FloatingTree>{content}</FloatingTree>;\n  }\n\n  return content;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Dropdown/index.tsx"],"sourcesContent":["import './dropdown.css';\nimport {\n  FloatingFocusManager,\n  FloatingFocusManagerProps,\n  FloatingNode,\n  FloatingTree,\n  OffsetOptions,\n  UseHoverProps,\n  autoUpdate,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useHover,\n  useId,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useMemoizedFn } from 'ahooks';\nimport { cn } from '../lib/utils';\nimport React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport Menu, { MenuInfo, MenuProps } from '../Menu';\nimport { useFloatingPopupZIndex } from '../_utils/floatingLayer';\nimport { ensureWeakRefFallback } from '../_utils/weakRefFallback';\n\nconst OVERLAY_EXIT_ANIMATION_MS = 200;\n\nensureWeakRefFallback();\n\nfunction resolvePlacementSide(\n  currentPlacement: string,\n): 'top' | 'bottom' | 'left' | 'right' {\n  const [side] = currentPlacement.split('-');\n  if (\n    side === 'top' ||\n    side === 'bottom' ||\n    side === 'left' ||\n    side === 'right'\n  ) {\n    return side;\n  }\n  if (currentPlacement.startsWith('top')) {\n    return 'top';\n  }\n  if (currentPlacement.startsWith('bottom')) {\n    return 'bottom';\n  }\n  if (currentPlacement.startsWith('left')) {\n    return 'left';\n  }\n  if (currentPlacement.startsWith('right')) {\n    return 'right';\n  }\n  return 'bottom';\n}\n\nfunction parsePopupMatchWidth(value: unknown): number | undefined {\n  if (typeof value === 'number') {\n    return value;\n  }\n\n  if (typeof value === 'string' && value.trim() !== '') {\n    const parsedValue = Number(value);\n    return Number.isNaN(parsedValue) ? undefined : parsedValue;\n  }\n\n  return undefined;\n}\n\nexport type ActionType = 'hover' | 'click';\nexport type PlacementType =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end'\n  // Legacy antd-style placement names\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight';\nexport interface IDropdownProps {\n  children: React.ReactNode;\n  /**\n   * @description 菜单弹出位置的偏移量\n   */\n  offset?: OffsetOptions;\n  /**\n   * @description 关闭后是否销毁 Dropdown\n   * @default false\n   */\n  destroyPopupOnHide?: boolean;\n  /**\n   * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位\n   * @default () => document.body\n   */\n  getPopupContainer?: () => HTMLElement;\n  /**\n   * @description 菜单\n   * @type Menu | () => Menu\n   * @default -\n   */\n  menu?: MenuProps;\n  // /**\n  //  * @description 菜单\n  //  * @type Menu | () => Menu\n  //  * @default -\n  //  */\n  // menu?: ReactElement | (() => ReactElement);\n  /**\n   * @description 下拉根元素的类名称\n   * @default -\n   */\n  overlayClassName?: string;\n  /**\n   * @description 菜单弹出位置\n   * @default bottomLeft\n   */\n  placement?: PlacementType;\n  /**\n   * @description 触发下拉的行为\n   * @type ActionType, 其中 ActionType 为 'hover' | 'click' | 'contextMenu';\n   * @default click\n   */\n  trigger?: ActionType | ActionType[];\n  /**\n   * @description 菜单是否显示\n   * @default -\n   */\n  open?: boolean;\n  /**\n   * @description 菜单显示状态改变时调用，参数为 open，点击菜单按钮导致的消失不会触发\n   * @default -\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * @description 焦点移出触发元素和浮层时是否关闭 Dropdown\n   * @default true\n   */\n  closeOnFocusOut?: boolean;\n  /**\n   * @description 下拉框外层 overlay 的内联样式（与定位 transform 合并）\n   * @default -\n   */\n  overlayStyle?: React.CSSProperties;\n  /**\n   * @description 下拉框内层 surface 的内联样式。\n   * 用于覆盖 surface 默认约束（默认 min-width:160px、max-width:320px）；\n   * 自定义 dropdownRender 内容若需大于 320px 宽，传 `{ width: 400, maxWidth: 'none' }` 即可。\n   * @default -\n   */\n  overlayInnerStyle?: React.CSSProperties;\n\n  /**\n   * @description 自定义下拉框内容\n   * @default -\n   */\n  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;\n  /**\n   * @description 是否禁用\n   * @default false\n   */\n  // 透传给子元素，antd的dropdown用cloneElement生成dropdown的子元素，劫持了disabled属性，因此如果Dropdown上没有disabled属性，子元素不能获得该属性\n  disabled?: boolean;\n  /**\n   * @description 鼠标移入后延迟显示下拉框的时间，单位为毫秒\n   * @default 0\n   */\n  delay?: UseHoverProps['delay'];\n  /**\n   * @description 是否在下拉框变化的时候自动更新位置\n   * @default false\n   */\n  autoUpdatePos?: boolean;\n  /**\n   * @description 初始化焦点，参照：https://floating-ui.com/docs/floatingfocusmanager#initialfocus\n   */\n  initialFocus?: FloatingFocusManagerProps['initialFocus'];\n\n  /**\n   * @description 菜单是否跟随触发元素宽度\n   * @default false\n   */\n  popupMatchTriggerWidth?: boolean | number;\n  /**\n   * @description 空间不足时自动计算菜单最大高度并启用滚动，启用后 offset 固定为 0\n   * @default false\n   */\n  allowOverlap?: boolean;\n}\n\nfunction hasTrigger(\n  trigger: ActionType | ActionType[],\n  action: ActionType,\n): boolean {\n  return Array.isArray(trigger) ? trigger.includes(action) : trigger === action;\n}\n\nexport default function Dropdown(props: IDropdownProps) {\n  const {\n    children,\n    destroyPopupOnHide = true,\n    getPopupContainer,\n    menu,\n    overlayClassName,\n    placement = 'bottom-start',\n    trigger = 'click',\n    open,\n    onOpenChange = () => {},\n    closeOnFocusOut = true,\n    overlayStyle,\n    overlayInnerStyle,\n    dropdownRender,\n    disabled,\n    offset: offsetProps = 4,\n    delay = 0,\n    autoUpdatePos = false,\n    // 默认不自动 focus\n    initialFocus = -1,\n    popupMatchTriggerWidth = false,\n    allowOverlap = false,\n  } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(open || false);\n  const [isAnimatingOut, setIsAnimatingOut] = useState(false);\n  const closeAnimationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n  const lastResolvedFloatingStylesRef = useRef<React.CSSProperties | null>(\n    null,\n  );\n  const lastResolvedSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const currentFloatingStylesRef = useRef<React.CSSProperties | null>(null);\n  const currentFloatingSideRef = useRef<'top' | 'bottom' | 'left' | 'right'>(\n    resolvePlacementSide(placement),\n  );\n  const [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n  const popupMatchTriggerWidthNumber = parsePopupMatchWidth(\n    popupMatchTriggerWidth,\n  );\n  const [matchedTriggerWidth, setMatchedTriggerWidth] = useState<\n    number | undefined\n  >(popupMatchTriggerWidthNumber);\n  const popupZIndex = useFloatingPopupZIndex();\n\n  const onOpenChangeFn = useMemoizedFn(onOpenChange);\n  const isOpenControlled = open !== undefined;\n\n  const clearCloseAnimationTimer = useCallback(() => {\n    if (closeAnimationTimerRef.current) {\n      clearTimeout(closeAnimationTimerRef.current);\n      closeAnimationTimerRef.current = null;\n    }\n  }, []);\n\n  const stopCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    document.body.classList.remove('ald-dropdown-root-closing');\n    setIsAnimatingOut(false);\n  }, [clearCloseAnimationTimer]);\n\n  const markRootClosing = useCallback(() => {\n    document.body.classList.add('ald-dropdown-root-closing');\n    lastResolvedFloatingStylesRef.current =\n      currentFloatingStylesRef.current ?? lastResolvedFloatingStylesRef.current;\n    lastResolvedSideRef.current =\n      currentFloatingSideRef.current ?? lastResolvedSideRef.current;\n  }, []);\n\n  const startCloseAnimation = useCallback(() => {\n    clearCloseAnimationTimer();\n    markRootClosing();\n    setIsAnimatingOut(true);\n    closeAnimationTimerRef.current = setTimeout(() => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n      setIsAnimatingOut(false);\n      closeAnimationTimerRef.current = null;\n    }, OVERLAY_EXIT_ANIMATION_MS);\n  }, [clearCloseAnimationTimer, markRootClosing]);\n\n  useLayoutEffect(() => {\n    if (!isOpenControlled) {\n      return;\n    }\n\n    if (open) {\n      stopCloseAnimation();\n      setIsOpen(true);\n      return;\n    }\n\n    if (isOpen) {\n      startCloseAnimation();\n    }\n    setIsOpen(false);\n  }, [isOpen, isOpenControlled, open, startCloseAnimation, stopCloseAnimation]);\n\n  useEffect(() => {\n    return () => {\n      clearCloseAnimationTimer();\n    };\n  }, [clearCloseAnimationTimer]);\n\n  useEffect(() => {\n    return () => {\n      document.body.classList.remove('ald-dropdown-root-closing');\n    };\n  }, []);\n\n  const onChangeOpen = useCallback(\n    (newOpen: boolean) => {\n      if (newOpen) {\n        stopCloseAnimation();\n      } else {\n        startCloseAnimation();\n      }\n\n      if (!isOpenControlled) {\n        setIsOpen(newOpen);\n      }\n      onOpenChangeFn(newOpen);\n    },\n    [isOpenControlled, onOpenChangeFn, startCloseAnimation, stopCloseAnimation],\n  );\n\n  const nodeId = useFloatingNodeId();\n  const {\n    refs,\n    floatingStyles,\n    context,\n    placement: floatingPlacement,\n    x,\n    y,\n  } = useFloating({\n    nodeId,\n    placement: placement as any,\n    open: isOpen,\n    onOpenChange: onChangeOpen,\n    middleware: [\n      offset(allowOverlap ? 0 : offsetProps),\n      flip({\n        fallbackAxisSideDirection: 'end',\n        ...(allowOverlap && { fallbackStrategy: 'bestFit' }),\n      }),\n      shift(allowOverlap ? { mainAxis: true } : undefined),\n      size({\n        ...(allowOverlap && { padding: 8 }),\n        apply({ availableHeight, elements }) {\n          if (!allowOverlap) {\n            return;\n          }\n\n          Object.assign(elements.floating.style, {\n            maxHeight: `${Math.max(100, availableHeight)}px`,\n            overflowY: 'auto',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdatePos ? autoUpdate : undefined,\n  });\n\n  const click = useClick(context, {\n    enabled: hasTrigger(trigger, 'click'),\n  });\n  const hover = useHover(context, {\n    enabled: hasTrigger(trigger, 'hover'),\n    handleClose: safePolygon({}),\n    delay: delay,\n  });\n  const dismiss = useDismiss(context, {});\n  const role = useRole(context);\n\n  const propsList = useMemo(() => {\n    const res = [dismiss, role];\n\n    if (hasTrigger(trigger, 'hover')) {\n      res.unshift(hover);\n    }\n    if (hasTrigger(trigger, 'click')) {\n      res.unshift(click);\n    }\n    return res;\n  }, [trigger, click, dismiss, role, hover]);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions(propsList);\n\n  const headingId = useId();\n\n  useLayoutEffect(() => {\n    if (!popupMatchTriggerWidth || !isOpen) {\n      setMatchedTriggerWidth(undefined);\n      return;\n    }\n\n    if (popupMatchTriggerWidthNumber !== undefined) {\n      setMatchedTriggerWidth(popupMatchTriggerWidthNumber);\n      return;\n    }\n\n    const referenceElement = targetElement;\n    if (!referenceElement) {\n      return;\n    }\n\n    const updateMatchedWidth = () => {\n      const nextWidth = referenceElement.getBoundingClientRect().width;\n      setMatchedTriggerWidth((currentWidth) =>\n        currentWidth === nextWidth ? currentWidth : nextWidth,\n      );\n    };\n\n    updateMatchedWidth();\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', updateMatchedWidth);\n      return () => {\n        window.removeEventListener('resize', updateMatchedWidth);\n      };\n    }\n\n    let resizeAnimationFrame: number | undefined;\n    const scheduleMatchedWidthUpdate = () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      resizeAnimationFrame = requestAnimationFrame(updateMatchedWidth);\n    };\n\n    const observer = new ResizeObserver(scheduleMatchedWidthUpdate);\n    observer.observe(referenceElement);\n\n    return () => {\n      if (resizeAnimationFrame !== undefined) {\n        cancelAnimationFrame(resizeAnimationFrame);\n      }\n      observer.disconnect();\n    };\n  }, [\n    isOpen,\n    popupMatchTriggerWidth,\n    popupMatchTriggerWidthNumber,\n    targetElement,\n  ]);\n\n  const child = children as React.ReactElement;\n  const childProps = child.props || {};\n  const referenceProps = getReferenceProps();\n  const updateMatchedWidthFromElement = useCallback(\n    (element: HTMLElement) => {\n      if (!popupMatchTriggerWidth) {\n        return;\n      }\n\n      setMatchedTriggerWidth((currentWidth) => {\n        const nextWidth =\n          popupMatchTriggerWidthNumber !== undefined\n            ? popupMatchTriggerWidthNumber\n            : element.getBoundingClientRect().width;\n        return currentWidth === nextWidth ? currentWidth : nextWidth;\n      });\n    },\n    [popupMatchTriggerWidth, popupMatchTriggerWidthNumber],\n  );\n  const modifiedChild = cloneElement(child, {\n    ...childProps,\n    disabled,\n    // ref: (node: HTMLDivElement) => refs.setReference(node),\n    ...referenceProps,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      updateMatchedWidthFromElement(event.currentTarget);\n      childProps.onClick?.(event);\n      const { onClick: referenceOnClick } = referenceProps;\n      if (typeof referenceOnClick === 'function') {\n        referenceOnClick(event);\n      }\n    },\n  });\n\n  const onMenuItemClick = useCallback(\n    (info: MenuInfo) => {\n      if (menu?.onClick) {\n        menu.onClick(info);\n      }\n      if (info.keepOpen) {\n        document.body.classList.remove('ald-dropdown-root-closing');\n        return;\n      }\n      onChangeOpen(false);\n    },\n    [menu, onChangeOpen],\n  );\n\n  const menuInstance = useMemo(() => {\n    const menuProps = {\n      ...menu,\n      items: menu?.items || [],\n      menuStyle: {\n        ...(popupMatchTriggerWidth\n          ? {\n              width: '100%',\n              minWidth: 0,\n              maxWidth: 'none',\n            }\n          : undefined),\n        ...menu?.menuStyle,\n      },\n      onBeforeLeafItemClick: markRootClosing,\n      rootClosing: isAnimatingOut,\n    };\n    return (\n      <Menu\n        {...menuProps}\n        onClick={onMenuItemClick}\n        externalOverflow={allowOverlap}\n      />\n    );\n  }, [\n    allowOverlap,\n    isAnimatingOut,\n    markRootClosing,\n    menu,\n    onMenuItemClick,\n    popupMatchTriggerWidth,\n  ]);\n\n  const popupElement = useMemo(() => {\n    return typeof dropdownRender === 'function'\n      ? dropdownRender(menuInstance)\n      : menuInstance;\n  }, [dropdownRender, menuInstance]);\n\n  const mergedMatchedTriggerWidth =\n    popupMatchTriggerWidthNumber ?? matchedTriggerWidth;\n  const matchedOverlayStyle =\n    popupMatchTriggerWidth && mergedMatchedTriggerWidth !== undefined\n      ? ({\n          width: `${mergedMatchedTriggerWidth}px`,\n          minWidth: 0,\n        } satisfies React.CSSProperties)\n      : undefined;\n\n  const matchedSurfaceStyle = popupMatchTriggerWidth\n    ? ({\n        width: '100%',\n        minWidth: 0,\n        maxWidth: 'none',\n      } satisfies React.CSSProperties)\n    : undefined;\n\n  const floatingSide = resolvePlacementSide(String(floatingPlacement));\n  const shouldKeepMounted = !destroyPopupOnHide || isOpen || isAnimatingOut;\n  const isPositionReady = x !== null && y !== null;\n  const overlayHidden =\n    (!isOpen && !isAnimatingOut) || (isOpen && !isPositionReady);\n  const resolvedFloatingStyles = isAnimatingOut\n    ? lastResolvedFloatingStylesRef.current ?? floatingStyles\n    : floatingStyles;\n  const resolvedFloatingSide = isAnimatingOut\n    ? lastResolvedSideRef.current\n    : floatingSide;\n\n  if (isOpen && isPositionReady) {\n    currentFloatingStylesRef.current = { ...floatingStyles };\n    currentFloatingSideRef.current = floatingSide;\n    lastResolvedFloatingStylesRef.current = { ...floatingStyles };\n    lastResolvedSideRef.current = floatingSide;\n  }\n\n  // 渲染浮动内容到自定义容器\n  const renderFloatingContent = useCallback(() => {\n    const surface = (\n      <div\n        {...(isAnimatingOut ? {} : getFloatingProps())}\n        className={cn(\n          'ald-dropdown-overlay',\n          // tw-outline-none：FloatingFocusManager 打开时会聚焦浮层容器，不抑制 outline 会渲染出蓝色焦点框\n          'tw-pointer-events-auto tw-z-[1001] tw-max-w-none tw-outline-none',\n          overlayClassName,\n          { 'ald-dropdown-overlay-hidden': overlayHidden },\n        )}\n        ref={refs.setFloating}\n        style={{\n          zIndex: popupZIndex,\n          ...resolvedFloatingStyles,\n          ...matchedOverlayStyle,\n          ...overlayStyle,\n        }}\n        aria-labelledby={headingId}\n      >\n        <div\n          className={cn(\n            'ald-dropdown-surface',\n            'tw-flex tw-flex-col tw-items-start tw-text-sm',\n          )}\n          style={{\n            ...matchedSurfaceStyle,\n            ...overlayInnerStyle,\n          }}\n          data-state={isOpen ? 'open' : 'closed'}\n          data-side={resolvedFloatingSide}\n        >\n          {popupElement}\n        </div>\n      </div>\n    );\n\n    const popupElem =\n      isAnimatingOut && !isOpen ? (\n        surface\n      ) : (\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          initialFocus={initialFocus}\n          closeOnFocusOut={closeOnFocusOut}\n        >\n          {surface}\n        </FloatingFocusManager>\n      );\n\n    const popupContainer =\n      typeof getPopupContainer === 'function'\n        ? getPopupContainer()\n        : document.body;\n    return ReactDOM.createPortal(popupElem, popupContainer);\n  }, [\n    context,\n    getFloatingProps,\n    getPopupContainer,\n    headingId,\n    popupElement,\n    refs.setFloating,\n    overlayClassName,\n    overlayStyle,\n    overlayInnerStyle,\n    matchedOverlayStyle,\n    matchedSurfaceStyle,\n    popupZIndex,\n    overlayHidden,\n    isAnimatingOut,\n    isOpen,\n    initialFocus,\n    closeOnFocusOut,\n    resolvedFloatingSide,\n    resolvedFloatingStyles,\n  ]);\n\n  const popup = shouldKeepMounted ? renderFloatingContent() : null;\n  const { setReference } = refs;\n\n  const setTargetRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) {\n        // display: contents 元素没有 box model，getBoundingClientRect() 返回零值\n        // 需要获取实际的第一个子元素作为 floating-ui 的参考元素\n        const target =\n          node.style.display === 'contents'\n            ? (node.firstElementChild as HTMLElement) || node\n            : node;\n        setTargetElement((currentTarget) =>\n          currentTarget === target ? currentTarget : target,\n        );\n        setReference(target);\n      } else {\n        setTargetElement(null);\n        setReference(null);\n      }\n    },\n    [setReference],\n  );\n\n  const content = (\n    <>\n      <span ref={setTargetRef} style={{ display: 'contents' }}>\n        {modifiedChild}\n      </span>\n      <FloatingNode id={nodeId}>{popup}</FloatingNode>\n    </>\n  );\n\n  const parentId = useFloatingParentNodeId();\n  if (!parentId) {\n    return <FloatingTree>{content}</FloatingTree>;\n  }\n\n  return content;\n}\n"],"mappings":"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"}

package/dist/Empty/image/Data.js

@@ -14,13 +14,13 @@ var Data = () => {
 				cx: "80",
 				cy: "80",
 				r: "52",
-				fill: "#EAECF0"
+				fill: "var(--background-neutral-on-subtle)"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				fillRule: "evenodd",
 				clipRule: "evenodd",
 				d: "M138 40C140.209 40 142 38.2091 142 36C142 33.7909 140.209 32 138 32C135.791 32 134 33.7909 134 36C134 38.2091 135.791 40 138 40ZM25 52C27.7614 52 30 49.7614 30 47C30 44.2386 27.7614 42 25 42C22.2386 42 20 44.2386 20 47C20 49.7614 22.2386 52 25 52ZM156 63C156 66.866 152.866 70 149 70C145.134 70 142 66.866 142 63C142 59.134 145.134 56 149 56C152.866 56 156 59.134 156 63ZM22 138C25.866 138 29 134.866 29 131C29 127.134 25.866 124 22 124C18.134 124 15 127.134 15 131C15 134.866 18.134 138 22 138Z",
-				fill: "#F5F6F7"
+				fill: "var(--background-neutral-subtle)"
 			}),
 			/* @__PURE__ */ jsxs("g", {
 				filter: "url(#filter0_dd_5810_46613)",
@@ -78,13 +78,13 @@ var Data = () => {
 					width: "48",
 					height: "48",
 					rx: "24",
-					fill: "#1D2939",
+					fill: "var(--content-primary)",
 					fillOpacity: "0.4"
 				}), /* @__PURE__ */ jsx("path", {
 					fillRule: "evenodd",
 					clipRule: "evenodd",
 					d: "M80 105.5C80.6443 105.5 81.1667 106.022 81.1667 106.667V114.833H89.3333C89.9777 114.833 90.5 115.356 90.5 116C90.5 116.644 89.9777 117.167 89.3333 117.167H81.1667V125.333C81.1667 125.978 80.6443 126.5 80 126.5C79.3557 126.5 78.8333 125.978 78.8333 125.333V117.167H70.6667C70.0223 117.167 69.5 116.644 69.5 116C69.5 115.356 70.0223 114.833 70.6667 114.833H78.8333V106.667C78.8333 106.022 79.3557 105.5 80 105.5Z",
-					fill: "#FCFCFD"
+					fill: "var(--background-default)"
 				})]
 			})
 		] }), /* @__PURE__ */ jsxs("defs", { children: [
@@ -192,9 +192,9 @@ var Data = () => {
 				x2: "53.449",
 				y2: "5.18218",
 				gradientUnits: "userSpaceOnUse",
-				children: [/* @__PURE__ */ jsx("stop", { stopColor: "#D0D5DD" }), /* @__PURE__ */ jsx("stop", {
+				children: [/* @__PURE__ */ jsx("stop", { stopColor: "var(--border-neutral-subtle)" }), /* @__PURE__ */ jsx("stop", {
 					offset: "1",
-					stopColor: "#F2F4F7"
+					stopColor: "var(--background-neutral-surface)"
 				})]
 			}),
 			/* @__PURE__ */ jsxs("linearGradient", {
@@ -204,9 +204,9 @@ var Data = () => {
 				x2: "53.449",
 				y2: "5.18218",
 				gradientUnits: "userSpaceOnUse",
-				children: [/* @__PURE__ */ jsx("stop", { stopColor: "#D0D5DD" }), /* @__PURE__ */ jsx("stop", {
+				children: [/* @__PURE__ */ jsx("stop", { stopColor: "var(--border-neutral-subtle)" }), /* @__PURE__ */ jsx("stop", {
 					offset: "1",
-					stopColor: "#F2F4F7"
+					stopColor: "var(--background-neutral-surface)"
 				})]
 			}),
 			/* @__PURE__ */ jsxs("linearGradient", {
@@ -217,14 +217,14 @@ var Data = () => {
 				y2: "85.6423",
 				gradientUnits: "userSpaceOnUse",
 				children: [
-					/* @__PURE__ */ jsx("stop", { stopColor: "#D0D5DD" }),
+					/* @__PURE__ */ jsx("stop", { stopColor: "var(--border-neutral-subtle)" }),
 					/* @__PURE__ */ jsx("stop", {
 						offset: "0.695113",
-						stopColor: "#D0D5DD"
+						stopColor: "var(--border-neutral-subtle)"
 					}),
 					/* @__PURE__ */ jsx("stop", {
 						offset: "1",
-						stopColor: "#EAECF0"
+						stopColor: "var(--background-neutral-on-subtle)"
 					})
 				]
 			}),
@@ -236,14 +236,14 @@ var Data = () => {
 				y2: "106.642",
 				gradientUnits: "userSpaceOnUse",
 				children: [
-					/* @__PURE__ */ jsx("stop", { stopColor: "#D0D5DD" }),
+					/* @__PURE__ */ jsx("stop", { stopColor: "var(--border-neutral-subtle)" }),
 					/* @__PURE__ */ jsx("stop", {
 						offset: "0.695113",
-						stopColor: "#D0D5DD"
+						stopColor: "var(--border-neutral-subtle)"
 					}),
 					/* @__PURE__ */ jsx("stop", {
 						offset: "1",
-						stopColor: "#EAECF0"
+						stopColor: "var(--background-neutral-on-subtle)"
 					})
 				]
 			}),
@@ -254,9 +254,9 @@ var Data = () => {
 				x2: "106.002",
 				y2: "48.6271",
 				gradientUnits: "userSpaceOnUse",
-				children: [/* @__PURE__ */ jsx("stop", { stopColor: "#F2F4F7" }), /* @__PURE__ */ jsx("stop", {
+				children: [/* @__PURE__ */ jsx("stop", { stopColor: "var(--background-neutral-surface)" }), /* @__PURE__ */ jsx("stop", {
 					offset: "1",
-					stopColor: "#F5F6F7"
+					stopColor: "var(--background-neutral-subtle)"
 				})]
 			})
 		] })]