@aloudata/aloudata-design 3.0.27 → 3.1.1

package/dist/Select/index.js

@@ -2,6 +2,7 @@ import DisabledContext from "../ConfigProvider/DisabledContext.js";
 import { noOpFilter, toArray, toString } from "./utils/commonUtil.js";
 import useOptions, { isRawValue } from "./hooks/useOptions.js";
 import useCache_default from "./hooks/useCache.js";
+import { createSelectOptionCollection } from "./components/OptionCollection.js";
 import BaseSelect, { isMultiple } from "./BaseSelect.js";
 import { injectPropsWithOption } from "./utils/valueUtil.js";
 import useDisplayMenu from "./hooks/useDisplayMenu.js";
@@ -10,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 //#region src/Select/index.tsx
 var Select_default = forwardRef(function Select(props, ref) {
-	const { value, defaultValue, mode, menu, options, onChange, onSelect, onSearch, onDeselect, labelInValue, filterOption, searchValue, optionLabelProp, listHeight = 256, disabled: customDisabled } = props;
+	const { value, defaultValue, mode, menu, options, onChange, onSelect, onSearch, onDeselect, labelInValue, filterOption, searchValue, optionLabelProp, listHeight = 256, disabled: customDisabled, showSearch, dropdownRender } = props;
 	const [internalValue, setInternalValue] = useMergedState(defaultValue, { value });
 	const disabled = useContext(DisabledContext);
 	const mergedDisabled = customDisabled ?? disabled;
@@ -21,7 +22,7 @@ var Select_default = forwardRef(function Select(props, ref) {
 		optionLabelProp,
 		listHeight
 	});
-	const multiple = mode && isMultiple(mode);
+	const multiple = isMultiple(mode);
 	const [innerSearchValue, setInnerSearchValue] = useMergedState(void 0, { value: searchValue });
 	const convert2LabelValues = React.useCallback((draftValues) => {
 		return toArray(draftValues).map((val) => {
@@ -132,6 +133,45 @@ var Select_default = forwardRef(function Select(props, ref) {
 		keyMenuItems
 	]);
 	const displayMenu = useDisplayMenu(selectMenu, onSearch ? filterOption || noOpFilter : filterOption, innerSearchValue);
+	const useStandardOptionCollection = !menu && !dropdownRender && (!showSearch || !multiple) && !(options || []).some((option) => option.children?.length);
+	const collectionMenuItems = useMemo(() => {
+		if (!showSearch) return keyMenuItems;
+		const query = innerSearchValue || "";
+		return new Map(Array.from(keyMenuItems).filter(([, option]) => {
+			if (onSearch && !filterOption) return true;
+			if (filterOption) return filterOption(query, option);
+			return String(option.label ?? option.value).toLocaleLowerCase().includes(query.toLocaleLowerCase());
+		}));
+	}, [
+		filterOption,
+		innerSearchValue,
+		keyMenuItems,
+		onSearch,
+		showSearch
+	]);
+	const collectionId = React.useId().replace(/:/g, "");
+	const optionCollection = useMemo(() => {
+		if (!useStandardOptionCollection) return;
+		return createSelectOptionCollection(`ald-select-listbox-${collectionId}`, collectionMenuItems);
+	}, [
+		collectionId,
+		collectionMenuItems,
+		useStandardOptionCollection
+	]);
+	const onCollectionOptionSelect = useCallback((value) => {
+		const menuItem = keyMenuItems.get(toString(value));
+		const originalValue = menuItem?.value !== void 0 ? menuItem.value : value;
+		const selected = displayValues.some((item) => toString(item.value) === toString(originalValue));
+		if (multiple) triggerChange(selected ? displayValues.filter((item) => toString(item.value) !== toString(originalValue)).map((item) => item.value) : [...displayValues.map((item) => item.value), originalValue]);
+		else triggerChange(originalValue);
+		onOptionSelect(originalValue);
+	}, [
+		displayValues,
+		keyMenuItems,
+		multiple,
+		onOptionSelect,
+		triggerChange
+	]);
 	return /* @__PURE__ */ jsx(BaseSelect, {
 		...props,
 		ref,
@@ -142,7 +182,9 @@ var Select_default = forwardRef(function Select(props, ref) {
 		innerSearchValue: searchValue === void 0 ? innerSearchValue : searchValue,
 		onOptionSelect,
 		menu: selectMenu,
-		displayMenu
+		displayMenu,
+		optionCollection,
+		onCollectionOptionSelect
 	});
 });
 //#endregion

package/dist/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Select/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n  BaseSelectRef,\n  DefaultOptionType,\n  DisplayInfoType,\n  DraftValueType,\n  ISelectProps,\n  LabelInValueType,\n  RawValueType,\n} from './interface';\n\nimport useOptions, { isRawValue } from './hooks/useOptions';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { noOpFilter, toArray } from './utils/commonUtil';\nimport useCache from './hooks/useCache';\nimport BaseSelect, { BaseSelectProps, isMultiple } from './BaseSelect';\nimport { MenuInfo } from '../Menu';\nimport { injectPropsWithOption } from './utils/valueUtil';\nimport useDisplayMenu from './hooks/useDisplayMenu';\nimport { toString } from './utils/commonUtil';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\n\nexport default forwardRef(function Select(\n  props: ISelectProps,\n  ref: React.Ref<BaseSelectRef>,\n) {\n  const {\n    value,\n    defaultValue,\n    mode,\n    menu,\n    options,\n    onChange,\n    onSelect,\n    onSearch,\n    onDeselect,\n    labelInValue,\n    filterOption,\n    searchValue,\n    optionLabelProp,\n    listHeight = 256,\n    disabled: customDisabled,\n  } = props;\n\n  // =========================== Values ===========================\n  const [internalValue, setInternalValue] = useMergedState(defaultValue, {\n    value,\n  });\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n  const parsedOptions = useOptions({\n    menu,\n    options,\n    value: internalValue,\n    optionLabelProp,\n    listHeight,\n  });\n  const { menu: mergedMenu, keyMenuItems } = parsedOptions;\n  const multiple = mode && isMultiple(mode);\n  // ============================== SearchValue ==============================\n  const [innerSearchValue, setInnerSearchValue] = useMergedState<\n    string | undefined\n  >(undefined, {\n    value: searchValue,\n  });\n  // ========================= Wrap Value =========================\n  const convert2LabelValues = React.useCallback(\n    (draftValues: DraftValueType) => {\n      // Convert to array\n      const valueList = toArray(draftValues);\n\n      // Convert to labelInValue type\n      return valueList.map((val) => {\n        let rawValue: RawValueType;\n        let rawLabel: React.ReactNode;\n        let rawDisabled: boolean | undefined;\n\n        if (isRawValue(val)) {\n          rawValue = val;\n        } else {\n          rawLabel = val.label;\n          // @ts-ignore val.key是为了兼容存在key的情况\n          rawValue = (val.value as RawValueType) ?? (val.key as RawValueType);\n        }\n\n        const menuItem = keyMenuItems.get(toString(rawValue));\n        if (menuItem) {\n          // Fill missing props\n          if (rawLabel === undefined) {\n            if (optionLabelProp) {\n              rawLabel = menuItem[optionLabelProp] || menuItem.label;\n            } else {\n              rawLabel = menuItem.label;\n            }\n          }\n          rawDisabled = menuItem.disabled;\n        }\n\n        return {\n          label: rawLabel,\n          value: rawValue,\n          disabled: rawDisabled,\n        };\n      });\n    },\n    [keyMenuItems, optionLabelProp],\n  );\n\n  // Merged value with LabelValueType\n  const rawLabeledValues = React.useMemo(() => {\n    const values = convert2LabelValues(internalValue);\n\n    return values;\n  }, [internalValue, convert2LabelValues]);\n\n  // Fill label with cache to avoid option remove\n  const [mergedValues, getMixedOption] = useCache(\n    rawLabeledValues,\n    keyMenuItems,\n  );\n\n  const displayValues = React.useMemo(() => {\n    // `null` need show as placeholder instead\n    if (!mode && mergedValues.length === 1) {\n      const firstValue = mergedValues[0];\n      if (\n        firstValue.value === null &&\n        (firstValue.label === null || firstValue.label === undefined)\n      ) {\n        return [] as LabelInValueType[];\n      }\n    }\n\n    return mergedValues.map((item) => ({\n      ...item,\n      label: item.label ?? item.value,\n    }));\n  }, [mode, mergedValues]);\n\n  // =========================== Change ===========================\n  const triggerChange = useCallback(\n    (values: DraftValueType) => {\n      const labeledValues = convert2LabelValues(values);\n      setInternalValue(labeledValues);\n\n      if (\n        onChange &&\n        // Trigger event only when value changed\n        (labeledValues.length !== mergedValues.length ||\n          labeledValues.some(\n            (newVal, index) => mergedValues[index]?.value !== newVal?.value,\n          ))\n      ) {\n        const returnValues = labelInValue\n          ? labeledValues\n          : labeledValues.map((v) => v.value);\n        const returnOptions = labeledValues.map((v) =>\n          injectPropsWithOption(getMixedOption(v.value)),\n        );\n\n        onChange(\n          // Value\n          multiple ? returnValues : returnValues[0],\n          // Option\n          multiple ? returnOptions : returnOptions[0],\n        );\n      }\n    },\n    [\n      convert2LabelValues,\n      setInternalValue,\n      onChange,\n      mergedValues,\n      labelInValue,\n      multiple,\n      getMixedOption,\n    ],\n  );\n  // ========================= OptionList =========================\n  const triggerSelect = (\n    val: RawValueType,\n    selected: boolean,\n    type?: DisplayInfoType,\n  ) => {\n    const getSelectEnt = (): [\n      RawValueType | LabelInValueType,\n      DefaultOptionType,\n    ] => {\n      const option = getMixedOption(val);\n\n      return [\n        labelInValue\n          ? {\n              label: option.label,\n              value: val,\n            }\n          : val,\n        injectPropsWithOption(option),\n      ];\n    };\n\n    if (selected && onSelect) {\n      const [wrappedValue, option] = getSelectEnt();\n      onSelect(wrappedValue, option);\n    } else if (!selected && onDeselect && type !== 'clear') {\n      const [wrappedValue, option] = getSelectEnt();\n      onDeselect(wrappedValue, option);\n    }\n  };\n  // Used for OptionList selection\n  const onOptionSelect = (val: RawValueType) => {\n    // Get the original value from keyMenuItems to preserve the type (number/string)\n    const menuItem = keyMenuItems.get(toString(val));\n    const originalValue = menuItem?.value !== undefined ? menuItem.value : val;\n\n    const selected = displayValues.find(\n      (item) => toString(item.value) === toString(val),\n    );\n    if (isMultiple(mode)) {\n      if (!selected) {\n        triggerSelect(originalValue, true, 'add');\n      } else {\n        triggerSelect(originalValue, false, 'remove');\n      }\n    } else {\n      triggerSelect(originalValue, true, 'add');\n    }\n  };\n  // ======================= Display Change =======================\n  // BaseSelect display values change\n  const onDisplayValuesChange: BaseSelectProps['onDisplayValuesChange'] = (\n    nextValues,\n    info,\n  ) => {\n    triggerChange(nextValues);\n    const { type, values } = info;\n\n    if (type === 'remove' || type === 'clear') {\n      values.forEach((item) => {\n        triggerSelect(item.value, false, type);\n      });\n    }\n  };\n  const handleSearch = (value: string) => {\n    setInnerSearchValue(value);\n    if (onSearch) {\n      onSearch(value);\n    }\n  };\n\n  const selectMenu = useMemo(() => {\n    return {\n      ...mergedMenu,\n      items: mergedMenu?.items || [],\n      onClick: (menuInfo: MenuInfo) => {\n        // Get the original value from keyMenuItems to preserve the type (number/string)\n        const menuItem = keyMenuItems.get(menuInfo.key);\n        const originalValue =\n          menuItem?.value !== undefined ? menuItem.value : menuInfo.key;\n\n        if (mode && isMultiple(mode)) {\n          if (\n            displayValues.find((item) => toString(item.value) === menuInfo.key)\n          ) {\n            triggerChange(\n              displayValues\n                .filter((item) => toString(item.value) !== menuInfo.key)\n                .map((item) => item.value),\n            );\n          } else {\n            triggerChange([...displayValues, originalValue]);\n          }\n        } else {\n          triggerChange(originalValue);\n        }\n        mergedMenu?.onClick?.(menuInfo);\n      },\n    };\n  }, [mergedMenu, mode, displayValues, triggerChange, keyMenuItems]);\n\n  const displayMenu = useDisplayMenu(\n    selectMenu,\n    // 如果用户接管了搜索，则默认不做搜索过滤\n    onSearch ? filterOption || noOpFilter : filterOption,\n    innerSearchValue,\n  );\n\n  return (\n    <BaseSelect\n      {...props}\n      ref={ref}\n      disabled={mergedDisabled}\n      displayValues={displayValues}\n      onDisplayValuesChange={onDisplayValuesChange}\n      setInnerSearchValue={handleSearch}\n      innerSearchValue={\n        searchValue === undefined ? innerSearchValue : searchValue\n      }\n      onOptionSelect={onOptionSelect}\n      menu={selectMenu}\n      displayMenu={displayMenu}\n    ></BaseSelect>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Select/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n  BaseSelectRef,\n  DefaultOptionType,\n  DisplayInfoType,\n  DraftValueType,\n  ISelectProps,\n  LabelInValueType,\n  RawValueType,\n} from './interface';\n\nimport useOptions, { isRawValue } from './hooks/useOptions';\nimport useMergedState from 'rc-util/es/hooks/useMergedState';\nimport { noOpFilter, toArray } from './utils/commonUtil';\nimport useCache from './hooks/useCache';\nimport BaseSelect, { BaseSelectProps, isMultiple } from './BaseSelect';\nimport { MenuInfo } from '../Menu';\nimport { injectPropsWithOption } from './utils/valueUtil';\nimport useDisplayMenu from './hooks/useDisplayMenu';\nimport { toString } from './utils/commonUtil';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport {\n  createSelectOptionCollection,\n  SelectOptionCollection,\n} from './components/OptionCollection';\n\nexport default forwardRef(function Select(\n  props: ISelectProps,\n  ref: React.Ref<BaseSelectRef>,\n) {\n  const {\n    value,\n    defaultValue,\n    mode,\n    menu,\n    options,\n    onChange,\n    onSelect,\n    onSearch,\n    onDeselect,\n    labelInValue,\n    filterOption,\n    searchValue,\n    optionLabelProp,\n    listHeight = 256,\n    disabled: customDisabled,\n    showSearch,\n    dropdownRender,\n  } = props;\n\n  // =========================== Values ===========================\n  const [internalValue, setInternalValue] = useMergedState(defaultValue, {\n    value,\n  });\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n  const parsedOptions = useOptions({\n    menu,\n    options,\n    value: internalValue,\n    optionLabelProp,\n    listHeight,\n  });\n  const { menu: mergedMenu, keyMenuItems } = parsedOptions;\n  const multiple = isMultiple(mode);\n  // ============================== SearchValue ==============================\n  const [innerSearchValue, setInnerSearchValue] = useMergedState<\n    string | undefined\n  >(undefined, {\n    value: searchValue,\n  });\n  // ========================= Wrap Value =========================\n  const convert2LabelValues = React.useCallback(\n    (draftValues: DraftValueType) => {\n      // Convert to array\n      const valueList = toArray(draftValues);\n\n      // Convert to labelInValue type\n      return valueList.map((val) => {\n        let rawValue: RawValueType;\n        let rawLabel: React.ReactNode;\n        let rawDisabled: boolean | undefined;\n\n        if (isRawValue(val)) {\n          rawValue = val;\n        } else {\n          rawLabel = val.label;\n          // @ts-ignore val.key是为了兼容存在key的情况\n          rawValue = (val.value as RawValueType) ?? (val.key as RawValueType);\n        }\n\n        const menuItem = keyMenuItems.get(toString(rawValue));\n        if (menuItem) {\n          // Fill missing props\n          if (rawLabel === undefined) {\n            if (optionLabelProp) {\n              rawLabel = menuItem[optionLabelProp] || menuItem.label;\n            } else {\n              rawLabel = menuItem.label;\n            }\n          }\n          rawDisabled = menuItem.disabled;\n        }\n\n        return {\n          label: rawLabel,\n          value: rawValue,\n          disabled: rawDisabled,\n        };\n      });\n    },\n    [keyMenuItems, optionLabelProp],\n  );\n\n  // Merged value with LabelValueType\n  const rawLabeledValues = React.useMemo(() => {\n    const values = convert2LabelValues(internalValue);\n\n    return values;\n  }, [internalValue, convert2LabelValues]);\n\n  // Fill label with cache to avoid option remove\n  const [mergedValues, getMixedOption] = useCache(\n    rawLabeledValues,\n    keyMenuItems,\n  );\n\n  const displayValues = React.useMemo(() => {\n    // `null` need show as placeholder instead\n    if (!mode && mergedValues.length === 1) {\n      const firstValue = mergedValues[0];\n      if (\n        firstValue.value === null &&\n        (firstValue.label === null || firstValue.label === undefined)\n      ) {\n        return [] as LabelInValueType[];\n      }\n    }\n\n    return mergedValues.map((item) => ({\n      ...item,\n      label: item.label ?? item.value,\n    }));\n  }, [mode, mergedValues]);\n\n  // =========================== Change ===========================\n  const triggerChange = useCallback(\n    (values: DraftValueType) => {\n      const labeledValues = convert2LabelValues(values);\n      setInternalValue(labeledValues);\n\n      if (\n        onChange &&\n        // Trigger event only when value changed\n        (labeledValues.length !== mergedValues.length ||\n          labeledValues.some(\n            (newVal, index) => mergedValues[index]?.value !== newVal?.value,\n          ))\n      ) {\n        const returnValues = labelInValue\n          ? labeledValues\n          : labeledValues.map((v) => v.value);\n        const returnOptions = labeledValues.map((v) =>\n          injectPropsWithOption(getMixedOption(v.value)),\n        );\n\n        onChange(\n          // Value\n          multiple ? returnValues : returnValues[0],\n          // Option\n          multiple ? returnOptions : returnOptions[0],\n        );\n      }\n    },\n    [\n      convert2LabelValues,\n      setInternalValue,\n      onChange,\n      mergedValues,\n      labelInValue,\n      multiple,\n      getMixedOption,\n    ],\n  );\n  // ========================= OptionList =========================\n  const triggerSelect = (\n    val: RawValueType,\n    selected: boolean,\n    type?: DisplayInfoType,\n  ) => {\n    const getSelectEnt = (): [\n      RawValueType | LabelInValueType,\n      DefaultOptionType,\n    ] => {\n      const option = getMixedOption(val);\n\n      return [\n        labelInValue\n          ? {\n              label: option.label,\n              value: val,\n            }\n          : val,\n        injectPropsWithOption(option),\n      ];\n    };\n\n    if (selected && onSelect) {\n      const [wrappedValue, option] = getSelectEnt();\n      onSelect(wrappedValue, option);\n    } else if (!selected && onDeselect && type !== 'clear') {\n      const [wrappedValue, option] = getSelectEnt();\n      onDeselect(wrappedValue, option);\n    }\n  };\n  // Used for OptionList selection\n  const onOptionSelect = (val: RawValueType) => {\n    // Get the original value from keyMenuItems to preserve the type (number/string)\n    const menuItem = keyMenuItems.get(toString(val));\n    const originalValue = menuItem?.value !== undefined ? menuItem.value : val;\n\n    const selected = displayValues.find(\n      (item) => toString(item.value) === toString(val),\n    );\n    if (isMultiple(mode)) {\n      if (!selected) {\n        triggerSelect(originalValue, true, 'add');\n      } else {\n        triggerSelect(originalValue, false, 'remove');\n      }\n    } else {\n      triggerSelect(originalValue, true, 'add');\n    }\n  };\n  // ======================= Display Change =======================\n  // BaseSelect display values change\n  const onDisplayValuesChange: BaseSelectProps['onDisplayValuesChange'] = (\n    nextValues,\n    info,\n  ) => {\n    triggerChange(nextValues);\n    const { type, values } = info;\n\n    if (type === 'remove' || type === 'clear') {\n      values.forEach((item) => {\n        triggerSelect(item.value, false, type);\n      });\n    }\n  };\n  const handleSearch = (value: string) => {\n    setInnerSearchValue(value);\n    if (onSearch) {\n      onSearch(value);\n    }\n  };\n\n  const selectMenu = useMemo(() => {\n    return {\n      ...mergedMenu,\n      items: mergedMenu?.items || [],\n      onClick: (menuInfo: MenuInfo) => {\n        // Get the original value from keyMenuItems to preserve the type (number/string)\n        const menuItem = keyMenuItems.get(menuInfo.key);\n        const originalValue =\n          menuItem?.value !== undefined ? menuItem.value : menuInfo.key;\n\n        if (mode && isMultiple(mode)) {\n          if (\n            displayValues.find((item) => toString(item.value) === menuInfo.key)\n          ) {\n            triggerChange(\n              displayValues\n                .filter((item) => toString(item.value) !== menuInfo.key)\n                .map((item) => item.value),\n            );\n          } else {\n            triggerChange([...displayValues, originalValue]);\n          }\n        } else {\n          triggerChange(originalValue);\n        }\n        mergedMenu?.onClick?.(menuInfo);\n      },\n    };\n  }, [mergedMenu, mode, displayValues, triggerChange, keyMenuItems]);\n\n  const displayMenu = useDisplayMenu(\n    selectMenu,\n    // 如果用户接管了搜索，则默认不做搜索过滤\n    onSearch ? filterOption || noOpFilter : filterOption,\n    innerSearchValue,\n  );\n\n  // Flat standard options use the private collection. Menu-shaped,\n  // searchable, custom popup, and nested inputs remain on the legacy path.\n  const useStandardOptionCollection =\n    !menu &&\n    !dropdownRender &&\n    (!showSearch || !multiple) &&\n    !(options || []).some((option) => option.children?.length);\n  const collectionMenuItems = useMemo(() => {\n    if (!showSearch) {\n      return keyMenuItems;\n    }\n\n    const query = innerSearchValue || '';\n    return new Map(\n      Array.from(keyMenuItems).filter(([, option]) => {\n        if (onSearch && !filterOption) {\n          return true;\n        }\n        if (filterOption) {\n          return filterOption(query, option);\n        }\n        return String(option.label ?? option.value)\n          .toLocaleLowerCase()\n          .includes(query.toLocaleLowerCase());\n      }),\n    );\n  }, [filterOption, innerSearchValue, keyMenuItems, onSearch, showSearch]);\n  const collectionId = React.useId().replace(/:/g, '');\n  const optionCollection = useMemo<SelectOptionCollection | undefined>(() => {\n    if (!useStandardOptionCollection) {\n      return undefined;\n    }\n\n    return createSelectOptionCollection(\n      `ald-select-listbox-${collectionId}`,\n      collectionMenuItems,\n    );\n  }, [collectionId, collectionMenuItems, useStandardOptionCollection]);\n\n  const onCollectionOptionSelect = useCallback(\n    (value: RawValueType) => {\n      const menuItem = keyMenuItems.get(toString(value));\n      const originalValue =\n        menuItem?.value !== undefined ? menuItem.value : value;\n\n      const selected = displayValues.some(\n        (item) => toString(item.value) === toString(originalValue),\n      );\n      if (multiple) {\n        triggerChange(\n          selected\n            ? displayValues\n                .filter(\n                  (item) => toString(item.value) !== toString(originalValue),\n                )\n                .map((item) => item.value)\n            : [...displayValues.map((item) => item.value), originalValue],\n        );\n      } else {\n        triggerChange(originalValue);\n      }\n      onOptionSelect(originalValue);\n    },\n    [displayValues, keyMenuItems, multiple, onOptionSelect, triggerChange],\n  );\n\n  return (\n    <BaseSelect\n      {...props}\n      ref={ref}\n      disabled={mergedDisabled}\n      displayValues={displayValues}\n      onDisplayValuesChange={onDisplayValuesChange}\n      setInnerSearchValue={handleSearch}\n      innerSearchValue={\n        searchValue === undefined ? innerSearchValue : searchValue\n      }\n      onOptionSelect={onOptionSelect}\n      menu={selectMenu}\n      displayMenu={displayMenu}\n      optionCollection={optionCollection}\n      onCollectionOptionSelect={onCollectionOptionSelect}\n    ></BaseSelect>\n  );\n});\n"],"mappings":"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"}

package/dist/Select/interface.d.ts

@@ -2,7 +2,7 @@ import { PlacementType } from '../Dropdown';
 import { ItemType, MenuDividerType, MenuHeaderType, MenuProps, SubMenuType } from '../Menu';
 import { CustomTagProps, Mode } from './BaseSelect.js';
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
-export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> {
+export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends React.AriaAttributes {
     prefix?: React.ReactNode;
     size?: 'small' | 'middle' | 'large';
     mode?: Mode;

package/dist/Skeleton/index.js

@@ -26,7 +26,7 @@ var INPUT_SIZE_MAP = {
 	default: 32,
 	large: 40
 };
-var SKELETON_BACKGROUND_COLOR = "var(--alias-colors-bg-skeleton-subtle, var(--background-neutral-subtle, #e5e7eb))";
+var SKELETON_BACKGROUND_COLOR = "var(--background-neutral-surface)";
 var SkeletonButton = ({ active, size = "default", shape = "square", block, className, style }) => {
 	const animClass = active ? "tw-animate-pulse" : "";
 	const dims = BUTTON_SIZE_MAP[size];

package/dist/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SkeletonProps {\n  active?: boolean;\n  loading?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  avatar?:\n    | boolean\n    | {\n        size?: number | 'small' | 'default' | 'large';\n        shape?: 'circle' | 'square';\n      };\n  title?: boolean | { width?: number | string };\n  paragraph?:\n    | boolean\n    | { rows?: number; width?: number | string | (number | string)[] };\n  round?: boolean;\n}\n\n// --- Shared types for sub-components ---\n\ntype SkeletonElementSize = 'small' | 'default' | 'large';\n\ninterface SkeletonElementBaseProps {\n  active?: boolean;\n  size?: SkeletonElementSize;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\ninterface SkeletonButtonProps extends SkeletonElementBaseProps {\n  shape?: 'circle' | 'round' | 'square';\n  block?: boolean;\n}\n\ninterface SkeletonAvatarProps extends SkeletonElementBaseProps {\n  shape?: 'circle' | 'square';\n}\n\ninterface SkeletonInputProps extends SkeletonElementBaseProps {\n  block?: boolean;\n}\n\ninterface SkeletonImageProps {\n  active?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n// --- Size maps ---\n\nconst BUTTON_SIZE_MAP: Record<\n  SkeletonElementSize,\n  { width: number; height: number }\n> = {\n  small: { width: 64, height: 24 },\n  default: { width: 80, height: 32 },\n  large: { width: 96, height: 40 },\n};\n\nconst AVATAR_SIZE_MAP: Record<SkeletonElementSize, number> = {\n  small: 24,\n  default: 32,\n  large: 40,\n};\n\nconst INPUT_SIZE_MAP: Record<SkeletonElementSize, number> = {\n  small: 24,\n  default: 32,\n  large: 40,\n};\n\nconst SKELETON_BACKGROUND_COLOR =\n  'var(--alias-colors-bg-skeleton-subtle, var(--background-neutral-subtle, #e5e7eb))';\n\n// --- Sub-components ---\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n  active,\n  size = 'default',\n  shape = 'square',\n  block,\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const dims = BUTTON_SIZE_MAP[size];\n\n  const borderRadius =\n    shape === 'circle'\n      ? '50%'\n      : shape === 'round'\n      ? `${dims.height / 2}px`\n      : '4px';\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-button tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        block && 'tw-block tw-w-full',\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width:\n          shape === 'circle' ? dims.height : block ? undefined : dims.width,\n        height: dims.height,\n        borderRadius,\n        ...style,\n      }}\n    />\n  );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n  active,\n  size = 'default',\n  shape = 'circle',\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const dim = typeof size === 'number' ? size : AVATAR_SIZE_MAP[size];\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-avatar tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width: dim,\n        height: dim,\n        borderRadius: shape === 'circle' ? '50%' : '4px',\n        ...style,\n      }}\n    />\n  );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n  active,\n  size = 'default',\n  block,\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const height = INPUT_SIZE_MAP[size];\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-input tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        block && 'tw-block tw-w-full',\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width: block ? undefined : 200,\n        height,\n        borderRadius: 4,\n        ...style,\n      }}\n    />\n  );\n};\n\nconst SkeletonImage: React.FC<SkeletonImageProps> = ({\n  active,\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-image tw-flex tw-items-center tw-justify-center tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width: 96,\n        height: 96,\n        borderRadius: 4,\n        ...style,\n      }}\n    >\n      <svg\n        viewBox=\"0 0 1098 1024\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        fill=\"currentColor\"\n        style={{ opacity: 0.2 }}\n      >\n        <path d=\"M365.714 329.143q0 45.714-32.036 77.75t-77.75 32.036-77.75-32.036-32.036-77.75 32.036-77.75 77.75-32.036 77.75 32.036 32.036 77.75zM950.857 548.571v256H146.286V694.857l182.857-182.857 91.429 91.429 292.571-292.571zM1005.714 146.286H91.429q-7.46 0-12.873 5.413T73.143 164.571v694.857q0 7.46 5.413 12.873t12.873 5.413h914.286q7.46 0 12.873-5.413t5.413-12.873V164.571q0-7.46-5.413-12.873t-12.873-5.413zm91.429 18.286v694.857q0 37.714-26.857 64.571t-64.571 26.857H91.429q-37.714 0-64.571-26.857T0 859.429V164.571q0-37.714 26.857-64.571T91.429 73.143h914.286q37.714 0 64.571 26.857t26.857 64.571z\" />\n      </svg>\n    </span>\n  );\n};\n\n// --- Main Skeleton component ---\n\nfunction Skeleton(props: SkeletonProps) {\n  const {\n    active = false,\n    loading = true,\n    className,\n    style,\n    children,\n    avatar,\n    title = true,\n    paragraph = true,\n    round,\n  } = props;\n\n  if (!loading) {\n    return <>{children}</>;\n  }\n\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const rows =\n    typeof paragraph === 'object' ? paragraph.rows || 3 : paragraph ? 3 : 0;\n\n  return (\n    <div\n      className={cn('ald-skeleton tw-flex tw-gap-4', className)}\n      style={style}\n    >\n      {avatar && (\n        <div\n          className={cn(\n            'ald-skeleton-avatar tw-shrink-0 tw-rounded-full tw-bg-[var(--background-neutral-subtle)]',\n            animClass,\n            typeof avatar === 'object' && avatar.shape === 'square'\n              ? 'tw-rounded-r-50'\n              : 'tw-rounded-full',\n          )}\n          style={{\n            backgroundColor: SKELETON_BACKGROUND_COLOR,\n            width: 40,\n            height: 40,\n          }}\n        />\n      )}\n      <div className=\"ald-skeleton-content tw-flex-1\">\n        {title && (\n          <div\n            className={cn(\n              'ald-skeleton-title tw-mb-4 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n              animClass,\n              round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n            )}\n            style={{\n              backgroundColor: SKELETON_BACKGROUND_COLOR,\n              width: typeof title === 'object' ? title.width : '38%',\n            }}\n          />\n        )}\n        {paragraph &&\n          Array.from({ length: rows }).map((_, i) => (\n            <div\n              key={i}\n              className={cn(\n                'ald-skeleton-paragraph tw-mb-3 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n                animClass,\n                round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n              )}\n              style={{\n                backgroundColor: SKELETON_BACKGROUND_COLOR,\n                width: i === rows - 1 ? '61%' : '100%',\n              }}\n            />\n          ))}\n      </div>\n    </div>\n  );\n}\n\nfunction SkeletonNode({\n  active,\n  className,\n  style,\n  children,\n}: {\n  active?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        'ald-skeleton-node tw-inline-flex tw-items-center tw-justify-center tw-rounded-r-25 tw-bg-[var(--background-neutral-subtle)]',\n        active && 'tw-animate-pulse',\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\n// Attach sub-components\nSkeleton.Button = SkeletonButton;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Input = SkeletonInput;\nSkeleton.Image = SkeletonImage;\nSkeleton.Node = SkeletonNode;\n\nexport default Skeleton;\n"],"mappings":";;;;AAsDA,IAAM,kBAGF;CACF,OAAO;EAAE,OAAO;EAAI,QAAQ;EAAI;CAChC,SAAS;EAAE,OAAO;EAAI,QAAQ;EAAI;CAClC,OAAO;EAAE,OAAO;EAAI,QAAQ;EAAI;CACjC;AAED,IAAM,kBAAuD;CAC3D,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,IAAM,iBAAsD;CAC1D,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,IAAM,4BACJ;AAIF,IAAM,kBAAiD,EACrD,QACA,OAAO,WACP,QAAQ,UACR,OACA,WACA,YACI;CACJ,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,OAAO,gBAAgB;CAE7B,MAAM,eACJ,UAAU,WACN,QACA,UAAU,UACV,GAAG,KAAK,SAAS,EAAE,MACnB;AAEN,QACE,oBAAC,QAAD;EACE,WAAW,GACT,gFACA,WACA,SAAS,sBACT,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OACE,UAAU,WAAW,KAAK,SAAS,QAAQ,SAAY,KAAK;GAC9D,QAAQ,KAAK;GACb;GACA,GAAG;GACJ;EACD,CAAA;;AAIN,IAAM,kBAAiD,EACrD,QACA,OAAO,WACP,QAAQ,UACR,WACA,YACI;CACJ,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,gBAAgB;AAE9D,QACE,oBAAC,QAAD;EACE,WAAW,GACT,gFACA,WACA,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OAAO;GACP,QAAQ;GACR,cAAc,UAAU,WAAW,QAAQ;GAC3C,GAAG;GACJ;EACD,CAAA;;AAIN,IAAM,iBAA+C,EACnD,QACA,OAAO,WACP,OACA,WACA,YACI;CACJ,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,SAAS,eAAe;AAE9B,QACE,oBAAC,QAAD;EACE,WAAW,GACT,+EACA,WACA,SAAS,sBACT,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OAAO,QAAQ,SAAY;GAC3B;GACA,cAAc;GACd,GAAG;GACJ;EACD,CAAA;;AAIN,IAAM,iBAA+C,EACnD,QACA,WACA,YACI;AAGJ,QACE,oBAAC,QAAD;EACE,WAAW,GACT,yGALY,SAAS,qBAAqB,IAO1C,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,OAAO;GACP,QAAQ;GACR,cAAc;GACd,GAAG;GACJ;YAED,oBAAC,OAAD;GACE,SAAQ;GACR,OAAM;GACN,OAAM;GACN,QAAO;GACP,MAAK;GACL,OAAO,EAAE,SAAS,IAAK;aAEvB,oBAAC,QAAD,EAAM,GAAE,mlBAAolB,CAAA;GACxlB,CAAA;EACD,CAAA;;AAMX,SAAS,SAAS,OAAsB;CACtC,MAAM,EACJ,SAAS,OACT,UAAU,MACV,WACA,OACA,UACA,QACA,QAAQ,MACR,YAAY,MACZ,UACE;AAEJ,KAAI,CAAC,QACH,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;CAGxB,MAAM,YAAY,SAAS,qBAAqB;CAChD,MAAM,OACJ,OAAO,cAAc,WAAW,UAAU,QAAQ,IAAI,YAAY,IAAI;AAExE,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,UAAU;EAClD;YAFT,CAIG,UACC,oBAAC,OAAD;GACE,WAAW,GACT,4FACA,WACA,OAAO,WAAW,YAAY,OAAO,UAAU,WAC3C,oBACA,kBACL;GACD,OAAO;IACL,iBAAiB;IACjB,OAAO;IACP,QAAQ;IACT;GACD,CAAA,EAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IACE,WAAW,GACT,8EACA,WACA,QAAQ,oBAAoB,kBAC7B;IACD,OAAO;KACL,iBAAiB;KACjB,OAAO,OAAO,UAAU,WAAW,MAAM,QAAQ;KAClD;IACD,CAAA,EAEH,aACC,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,KAAK,GAAG,MACnC,oBAAC,OAAD;IAEE,WAAW,GACT,kFACA,WACA,QAAQ,oBAAoB,kBAC7B;IACD,OAAO;KACL,iBAAiB;KACjB,OAAO,MAAM,OAAO,IAAI,QAAQ;KACjC;IACD,EAVK,EAUL,CACF,CACA;KACF;;;AAIV,SAAS,aAAa,EACpB,QACA,WACA,OACA,YAMC;AACD,QACE,oBAAC,OAAD;EACE,WAAW,GACT,+HACA,UAAU,oBACV,UACD;EACD,OAAO;GACL,iBAAiB;GACjB,GAAG;GACJ;EAEA;EACG,CAAA;;AAKV,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,QAAQ;AACjB,SAAS,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface SkeletonProps {\n  active?: boolean;\n  loading?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  avatar?:\n    | boolean\n    | {\n        size?: number | 'small' | 'default' | 'large';\n        shape?: 'circle' | 'square';\n      };\n  title?: boolean | { width?: number | string };\n  paragraph?:\n    | boolean\n    | { rows?: number; width?: number | string | (number | string)[] };\n  round?: boolean;\n}\n\n// --- Shared types for sub-components ---\n\ntype SkeletonElementSize = 'small' | 'default' | 'large';\n\ninterface SkeletonElementBaseProps {\n  active?: boolean;\n  size?: SkeletonElementSize;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\ninterface SkeletonButtonProps extends SkeletonElementBaseProps {\n  shape?: 'circle' | 'round' | 'square';\n  block?: boolean;\n}\n\ninterface SkeletonAvatarProps extends SkeletonElementBaseProps {\n  shape?: 'circle' | 'square';\n}\n\ninterface SkeletonInputProps extends SkeletonElementBaseProps {\n  block?: boolean;\n}\n\ninterface SkeletonImageProps {\n  active?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n// --- Size maps ---\n\nconst BUTTON_SIZE_MAP: Record<\n  SkeletonElementSize,\n  { width: number; height: number }\n> = {\n  small: { width: 64, height: 24 },\n  default: { width: 80, height: 32 },\n  large: { width: 96, height: 40 },\n};\n\nconst AVATAR_SIZE_MAP: Record<SkeletonElementSize, number> = {\n  small: 24,\n  default: 32,\n  large: 40,\n};\n\nconst INPUT_SIZE_MAP: Record<SkeletonElementSize, number> = {\n  small: 24,\n  default: 32,\n  large: 40,\n};\n\nconst SKELETON_BACKGROUND_COLOR = 'var(--background-neutral-surface)';\n\n// --- Sub-components ---\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n  active,\n  size = 'default',\n  shape = 'square',\n  block,\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const dims = BUTTON_SIZE_MAP[size];\n\n  const borderRadius =\n    shape === 'circle'\n      ? '50%'\n      : shape === 'round'\n      ? `${dims.height / 2}px`\n      : '4px';\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-button tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        block && 'tw-block tw-w-full',\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width:\n          shape === 'circle' ? dims.height : block ? undefined : dims.width,\n        height: dims.height,\n        borderRadius,\n        ...style,\n      }}\n    />\n  );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n  active,\n  size = 'default',\n  shape = 'circle',\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const dim = typeof size === 'number' ? size : AVATAR_SIZE_MAP[size];\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-avatar tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width: dim,\n        height: dim,\n        borderRadius: shape === 'circle' ? '50%' : '4px',\n        ...style,\n      }}\n    />\n  );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n  active,\n  size = 'default',\n  block,\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const height = INPUT_SIZE_MAP[size];\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-input tw-inline-block tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        block && 'tw-block tw-w-full',\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width: block ? undefined : 200,\n        height,\n        borderRadius: 4,\n        ...style,\n      }}\n    />\n  );\n};\n\nconst SkeletonImage: React.FC<SkeletonImageProps> = ({\n  active,\n  className,\n  style,\n}) => {\n  const animClass = active ? 'tw-animate-pulse' : '';\n\n  return (\n    <span\n      className={cn(\n        'ald-skeleton-image tw-flex tw-items-center tw-justify-center tw-bg-[var(--background-neutral-subtle)]',\n        animClass,\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        width: 96,\n        height: 96,\n        borderRadius: 4,\n        ...style,\n      }}\n    >\n      <svg\n        viewBox=\"0 0 1098 1024\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"48\"\n        height=\"48\"\n        fill=\"currentColor\"\n        style={{ opacity: 0.2 }}\n      >\n        <path d=\"M365.714 329.143q0 45.714-32.036 77.75t-77.75 32.036-77.75-32.036-32.036-77.75 32.036-77.75 77.75-32.036 77.75 32.036 32.036 77.75zM950.857 548.571v256H146.286V694.857l182.857-182.857 91.429 91.429 292.571-292.571zM1005.714 146.286H91.429q-7.46 0-12.873 5.413T73.143 164.571v694.857q0 7.46 5.413 12.873t12.873 5.413h914.286q7.46 0 12.873-5.413t5.413-12.873V164.571q0-7.46-5.413-12.873t-12.873-5.413zm91.429 18.286v694.857q0 37.714-26.857 64.571t-64.571 26.857H91.429q-37.714 0-64.571-26.857T0 859.429V164.571q0-37.714 26.857-64.571T91.429 73.143h914.286q37.714 0 64.571 26.857t26.857 64.571z\" />\n      </svg>\n    </span>\n  );\n};\n\n// --- Main Skeleton component ---\n\nfunction Skeleton(props: SkeletonProps) {\n  const {\n    active = false,\n    loading = true,\n    className,\n    style,\n    children,\n    avatar,\n    title = true,\n    paragraph = true,\n    round,\n  } = props;\n\n  if (!loading) {\n    return <>{children}</>;\n  }\n\n  const animClass = active ? 'tw-animate-pulse' : '';\n  const rows =\n    typeof paragraph === 'object' ? paragraph.rows || 3 : paragraph ? 3 : 0;\n\n  return (\n    <div\n      className={cn('ald-skeleton tw-flex tw-gap-4', className)}\n      style={style}\n    >\n      {avatar && (\n        <div\n          className={cn(\n            'ald-skeleton-avatar tw-shrink-0 tw-rounded-full tw-bg-[var(--background-neutral-subtle)]',\n            animClass,\n            typeof avatar === 'object' && avatar.shape === 'square'\n              ? 'tw-rounded-r-50'\n              : 'tw-rounded-full',\n          )}\n          style={{\n            backgroundColor: SKELETON_BACKGROUND_COLOR,\n            width: 40,\n            height: 40,\n          }}\n        />\n      )}\n      <div className=\"ald-skeleton-content tw-flex-1\">\n        {title && (\n          <div\n            className={cn(\n              'ald-skeleton-title tw-mb-4 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n              animClass,\n              round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n            )}\n            style={{\n              backgroundColor: SKELETON_BACKGROUND_COLOR,\n              width: typeof title === 'object' ? title.width : '38%',\n            }}\n          />\n        )}\n        {paragraph &&\n          Array.from({ length: rows }).map((_, i) => (\n            <div\n              key={i}\n              className={cn(\n                'ald-skeleton-paragraph tw-mb-3 tw-h-4 tw-bg-[var(--background-neutral-subtle)]',\n                animClass,\n                round ? 'tw-rounded-full' : 'tw-rounded-r-25',\n              )}\n              style={{\n                backgroundColor: SKELETON_BACKGROUND_COLOR,\n                width: i === rows - 1 ? '61%' : '100%',\n              }}\n            />\n          ))}\n      </div>\n    </div>\n  );\n}\n\nfunction SkeletonNode({\n  active,\n  className,\n  style,\n  children,\n}: {\n  active?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        'ald-skeleton-node tw-inline-flex tw-items-center tw-justify-center tw-rounded-r-25 tw-bg-[var(--background-neutral-subtle)]',\n        active && 'tw-animate-pulse',\n        className,\n      )}\n      style={{\n        backgroundColor: SKELETON_BACKGROUND_COLOR,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\n// Attach sub-components\nSkeleton.Button = SkeletonButton;\nSkeleton.Avatar = SkeletonAvatar;\nSkeleton.Input = SkeletonInput;\nSkeleton.Image = SkeletonImage;\nSkeleton.Node = SkeletonNode;\n\nexport default Skeleton;\n"],"mappings":"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"}

package/dist/Spin/index.d.ts

@@ -10,5 +10,5 @@ export interface SpinProps {
     className?: string;
     style?: React.CSSProperties;
 }
-declare function CustomSpin(props: SpinProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CustomSpin(props: SpinProps): import("react/jsx-runtime").JSX.Element;
 export default CustomSpin;

package/dist/Spin/index.js

@@ -2,15 +2,22 @@ import { cn } from "../lib/utils.js";
 import { cloneElement as cloneElement$1, isFragment, isReactComponent } from "../_utils/reactNode.js";
 import Icon from "./CustomIcon/index.js";
 import React, { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/Spin/index.tsx
 function CustomSpin(props) {
 	const { size, tip, direction = "vertical", children, spinning, wrapperClassName, className, style } = props;
-	if (!children) return Icon({
-		size,
-		tip,
-		direction,
-		spinning,
-		className
+	if (!children) return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": spinning,
+		"aria-label": typeof tip === "string" ? tip : "Loading",
+		children: Icon({
+			size,
+			tip,
+			direction,
+			spinning,
+			className
+		})
 	});
 	if (!isValidElement(children)) return children;
 	if (isFragment(children) || isReactComponent(children)) return React.createElement("div", {
@@ -18,7 +25,11 @@ function CustomSpin(props) {
 			...style,
 			position: "relative"
 		},
-		className: cn(wrapperClassName)
+		className: cn(wrapperClassName),
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": spinning,
+		"aria-label": typeof tip === "string" ? tip : "Loading"
 	}, [children, Icon({
 		size,
 		tip,
@@ -33,6 +44,10 @@ function CustomSpin(props) {
 			...children.props.style
 		},
 		className: cn(wrapperClassName, children.props.className),
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": spinning,
+		"aria-label": typeof tip === "string" ? tip : "Loading",
 		children: [children.props.children, Icon({
 			size,
 			tip,

package/dist/Spin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Spin/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, { ReactElement, isValidElement } from 'react';\nimport {\n  cloneElement,\n  isFragment,\n  isReactComponent,\n} from '../_utils/reactNode';\nimport CustomIcon from './CustomIcon';\n\nexport type TDirection = 'vertical' | 'horizontal';\n\nexport interface SpinProps {\n  size?: 'small' | 'large' | 'middle';\n  direction?: TDirection;\n  children?: React.ReactElement;\n  tip?: React.ReactNode;\n  spinning?: boolean;\n  wrapperClassName?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\nfunction CustomSpin(props: SpinProps) {\n  const {\n    size,\n    tip,\n    direction = 'vertical',\n    children,\n    spinning,\n    wrapperClassName,\n    className,\n    style,\n  } = props;\n  if (!children) {\n    return CustomIcon({ size, tip, direction, spinning, className });\n  }\n  if (!isValidElement(children)) {\n    return children;\n  }\n  if (isFragment(children) || isReactComponent(children)) {\n    return React.createElement(\n      'div',\n      {\n        style: { ...style, position: 'relative' },\n        className: cn(wrapperClassName),\n      },\n      [\n        children,\n        CustomIcon({\n          size,\n          tip,\n          direction,\n          inContainer: true,\n          spinning,\n          className,\n        }),\n      ],\n    );\n  } else {\n    return cloneElement(children, {\n      style: {\n        position: 'relative',\n        ...(children as ReactElement).props.style,\n      },\n      className: cn(\n        wrapperClassName,\n        (children as ReactElement).props.className,\n      ),\n      children: [\n        (children as ReactElement).props.children,\n        CustomIcon({\n          size,\n          tip,\n          direction,\n          spinning,\n          inContainer: true,\n          className,\n        }),\n      ],\n    });\n  }\n}\nexport default CustomSpin;\n"],"mappings":";;;;;AAqBA,SAAS,WAAW,OAAkB;CACpC,MAAM,EACJ,MACA,KACA,YAAY,YACZ,UACA,UACA,kBACA,WACA,UACE;AACJ,KAAI,CAAC,SACH,QAAO,KAAW;EAAE;EAAM;EAAK;EAAW;EAAU;EAAW,CAAC;AAElE,KAAI,CAAC,eAAe,SAAS,CAC3B,QAAO;AAET,KAAI,WAAW,SAAS,IAAI,iBAAiB,SAAS,CACpD,QAAO,MAAM,cACX,OACA;EACE,OAAO;GAAE,GAAG;GAAO,UAAU;GAAY;EACzC,WAAW,GAAG,iBAAiB;EAChC,EACD,CACE,UACA,KAAW;EACT;EACA;EACA;EACA,aAAa;EACb;EACA;EACD,CAAC,CACH,CACF;KAED,QAAO,eAAa,UAAU;EAC5B,OAAO;GACL,UAAU;GACV,GAAI,SAA0B,MAAM;GACrC;EACD,WAAW,GACT,kBACC,SAA0B,MAAM,UAClC;EACD,UAAU,CACP,SAA0B,MAAM,UACjC,KAAW;GACT;GACA;GACA;GACA;GACA,aAAa;GACb;GACD,CAAC,CACH;EACF,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Spin/index.tsx"],"sourcesContent":["import { cn } from '../lib/utils';\nimport React, { ReactElement, isValidElement } from 'react';\nimport {\n  cloneElement,\n  isFragment,\n  isReactComponent,\n} from '../_utils/reactNode';\nimport CustomIcon from './CustomIcon';\n\nexport type TDirection = 'vertical' | 'horizontal';\n\nexport interface SpinProps {\n  size?: 'small' | 'large' | 'middle';\n  direction?: TDirection;\n  children?: React.ReactElement;\n  tip?: React.ReactNode;\n  spinning?: boolean;\n  wrapperClassName?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\nfunction CustomSpin(props: SpinProps) {\n  const {\n    size,\n    tip,\n    direction = 'vertical',\n    children,\n    spinning,\n    wrapperClassName,\n    className,\n    style,\n  } = props;\n  if (!children) {\n    return (\n      <span\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-busy={spinning}\n        aria-label={typeof tip === 'string' ? tip : 'Loading'}\n      >\n        {CustomIcon({ size, tip, direction, spinning, className })}\n      </span>\n    );\n  }\n  if (!isValidElement(children)) {\n    return children;\n  }\n  if (isFragment(children) || isReactComponent(children)) {\n    return React.createElement(\n      'div',\n      {\n        style: { ...style, position: 'relative' },\n        className: cn(wrapperClassName),\n        role: 'status',\n        'aria-live': 'polite',\n        'aria-busy': spinning,\n        'aria-label': typeof tip === 'string' ? tip : 'Loading',\n      },\n      [\n        children,\n        CustomIcon({\n          size,\n          tip,\n          direction,\n          inContainer: true,\n          spinning,\n          className,\n        }),\n      ],\n    );\n  } else {\n    return cloneElement(children, {\n      style: {\n        position: 'relative',\n        ...(children as ReactElement).props.style,\n      },\n      className: cn(\n        wrapperClassName,\n        (children as ReactElement).props.className,\n      ),\n      role: 'status',\n      'aria-live': 'polite',\n      'aria-busy': spinning,\n      'aria-label': typeof tip === 'string' ? tip : 'Loading',\n      children: [\n        (children as ReactElement).props.children,\n        CustomIcon({\n          size,\n          tip,\n          direction,\n          spinning,\n          inContainer: true,\n          className,\n        }),\n      ],\n    });\n  }\n}\nexport default CustomSpin;\n"],"mappings":";;;;;;AAqBA,SAAS,WAAW,OAAkB;CACpC,MAAM,EACJ,MACA,KACA,YAAY,YACZ,UACA,UACA,kBACA,WACA,UACE;AACJ,KAAI,CAAC,SACH,QACE,oBAAC,QAAD;EACE,MAAK;EACL,aAAU;EACV,aAAW;EACX,cAAY,OAAO,QAAQ,WAAW,MAAM;YAE3C,KAAW;GAAE;GAAM;GAAK;GAAW;GAAU;GAAW,CAAC;EACrD,CAAA;AAGX,KAAI,CAAC,eAAe,SAAS,CAC3B,QAAO;AAET,KAAI,WAAW,SAAS,IAAI,iBAAiB,SAAS,CACpD,QAAO,MAAM,cACX,OACA;EACE,OAAO;GAAE,GAAG;GAAO,UAAU;GAAY;EACzC,WAAW,GAAG,iBAAiB;EAC/B,MAAM;EACN,aAAa;EACb,aAAa;EACb,cAAc,OAAO,QAAQ,WAAW,MAAM;EAC/C,EACD,CACE,UACA,KAAW;EACT;EACA;EACA;EACA,aAAa;EACb;EACA;EACD,CAAC,CACH,CACF;KAED,QAAO,eAAa,UAAU;EAC5B,OAAO;GACL,UAAU;GACV,GAAI,SAA0B,MAAM;GACrC;EACD,WAAW,GACT,kBACC,SAA0B,MAAM,UAClC;EACD,MAAM;EACN,aAAa;EACb,aAAa;EACb,cAAc,OAAO,QAAQ,WAAW,MAAM;EAC9C,UAAU,CACP,SAA0B,MAAM,UACjC,KAAW;GACT;GACA;GACA;GACA;GACA,aAAa;GACb;GACD,CAAC,CACH;EACF,CAAC"}

package/dist/Steps/index.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { ELangType, LocaleContext } from "../locale/default.js";
 import { CustomDot } from "./components/CustomDot/index.js";
 import { Step } from "./components/Step/index.js";
 import React from "react";
@@ -9,8 +10,31 @@ function getStepStatus(index, current, globalStatus) {
 	if (index === current) return globalStatus || "process";
 	return "wait";
 }
+var stepsA11yText = {
+	[ELangType.ZH_CN]: {
+		workflowProgress: "工作流进度",
+		status: {
+			finish: "已完成",
+			process: "进行中",
+			wait: "未开始",
+			error: "错误"
+		}
+	},
+	[ELangType.EN]: {
+		workflowProgress: "Workflow progress",
+		status: {
+			finish: "Completed",
+			process: "In progress",
+			wait: "Not started",
+			error: "Error"
+		}
+	}
+};
 function Steps({ className, current: controlledCurrent, direction = "horizontal", defaultCurrent = 0, status, items, children }) {
 	const current = controlledCurrent ?? defaultCurrent;
+	const accessibleIdPrefix = React.useId();
+	const { locale } = React.useContext(LocaleContext);
+	const a11yText = locale === ELangType.EN ? stepsA11yText[ELangType.EN] : stepsA11yText[ELangType.ZH_CN];
 	const resolvedItems = items || React.Children.toArray(children).filter(React.isValidElement).map((child) => ({
 		title: child.props.title,
 		description: child.props.description,
@@ -20,11 +44,21 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 	}));
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex", direction === "vertical" ? "ant-steps-vertical" : "ant-steps-horizontal", direction === "vertical" ? "tw-flex-col" : "tw-flex-row tw-items-start", className),
+		role: "list",
+		"aria-label": a11yText.workflowProgress,
 		children: resolvedItems.map((item, index) => {
 			const stepStatus = item.status || getStepStatus(index, current, status);
 			const isLast = index === resolvedItems.length - 1;
+			const titleId = `${accessibleIdPrefix}-step-${index}-title`;
+			const statusId = `${accessibleIdPrefix}-step-${index}-status`;
 			return /* @__PURE__ */ jsx("div", {
 				className: cn("ald-steps-item ant-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}`, `ant-steps-item-${stepStatus}`, item.disabled && "ald-steps-item-disabled tw-pointer-events-none tw-opacity-50", item.disabled && "ant-steps-item-disabled"),
+				role: "listitem",
+				"aria-current": index === current ? "step" : void 0,
+				"aria-labelledby": titleId,
+				"aria-describedby": statusId,
+				"aria-posinset": index + 1,
+				"aria-setsize": resolvedItems.length,
 				children: direction === "horizontal" ? /* @__PURE__ */ jsxs("div", {
 					className: "ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -51,13 +85,22 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 						]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
-							children: item.title
-						}), item.description && /* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--content-tertiary)]" : "tw-text-[var(--content-secondary)]"),
-							children: item.description
-						})]
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								id: titleId,
+								className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
+								children: item.title
+							}),
+							/* @__PURE__ */ jsx("span", {
+								id: statusId,
+								className: "tw-sr-only",
+								children: a11yText.status[stepStatus]
+							}),
+							item.description && /* @__PURE__ */ jsx("div", {
+								className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--content-tertiary)]" : "tw-text-[var(--content-secondary)]"),
+								children: item.description
+							})
+						]
 					})]
 				}) : /* @__PURE__ */ jsxs("div", {
 					className: "ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3",
@@ -81,13 +124,22 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ald-steps-item-content ant-steps-item-content",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
-							children: item.title
-						}), item.description && /* @__PURE__ */ jsx("div", {
-							className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
-							children: item.description
-						})]
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								id: titleId,
+								className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--content-tertiary)]", stepStatus === "process" && "tw-text-[var(--content-brand-primary)]", stepStatus === "wait" && "tw-text-[var(--content-primary)]", stepStatus === "error" && "tw-text-[var(--content-negative-secondary)]"),
+								children: item.title
+							}),
+							/* @__PURE__ */ jsx("span", {
+								id: statusId,
+								className: "tw-sr-only",
+								children: a11yText.status[stepStatus]
+							}),
+							item.description && /* @__PURE__ */ jsx("div", {
+								className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
+								children: item.description
+							})
+						]
 					})]
 				})
 			}, index);

package/dist/Steps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\nfunction Steps({\n  className,\n  current: controlledCurrent,\n  direction = 'horizontal',\n  defaultCurrent = 0,\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  const current = controlledCurrent ?? defaultCurrent;\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        disabled: child.props.disabled,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n        direction === 'vertical'\n          ? 'ant-steps-vertical'\n          : 'ant-steps-horizontal',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item ant-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n              `ant-steps-item-${stepStatus}`,\n              item.disabled &&\n                'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n              item.disabled && 'ant-steps-item-disabled',\n            )}\n          >\n            {direction === 'horizontal' ? (\n              <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'ant-steps-item-tail tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n                    <span className=\"ant-steps-icon\">\n                      <span className=\"ant-steps-icon-dot\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        index === 0 && 'ant-steps-item-tail',\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--content-tertiary)]'\n                          : 'tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ) : (\n              <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n                <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-tail ant-steps-item-tail',\n                        index < current\n                          ? 'ald-steps-item-tail-finish'\n                          : 'ald-steps-item-tail-wait',\n                        'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ width: 1.5, bottom: -24 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n                    <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n                      <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { ELangType, LocaleContext } from '../locale/default';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\n/* eslint-disable i18n/no-chinese-character -- Steps accessibility copy stays local to this bounded component migration. */\nconst stepsA11yText = {\n  [ELangType.ZH_CN]: {\n    workflowProgress: '工作流进度',\n    status: {\n      finish: '已完成',\n      process: '进行中',\n      wait: '未开始',\n      error: '错误',\n    },\n  },\n  [ELangType.EN]: {\n    workflowProgress: 'Workflow progress',\n    status: {\n      finish: 'Completed',\n      process: 'In progress',\n      wait: 'Not started',\n      error: 'Error',\n    },\n  },\n};\n/* eslint-enable i18n/no-chinese-character */\n\nfunction Steps({\n  className,\n  current: controlledCurrent,\n  direction = 'horizontal',\n  defaultCurrent = 0,\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  const current = controlledCurrent ?? defaultCurrent;\n  const accessibleIdPrefix = React.useId();\n  const { locale } = React.useContext(LocaleContext);\n  const a11yText =\n    locale === ELangType.EN\n      ? stepsA11yText[ELangType.EN]\n      : stepsA11yText[ELangType.ZH_CN];\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        disabled: child.props.disabled,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n        direction === 'vertical'\n          ? 'ant-steps-vertical'\n          : 'ant-steps-horizontal',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n      role=\"list\"\n      aria-label={a11yText.workflowProgress}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n        const titleId = `${accessibleIdPrefix}-step-${index}-title`;\n        const statusId = `${accessibleIdPrefix}-step-${index}-status`;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item ant-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n              `ant-steps-item-${stepStatus}`,\n              item.disabled &&\n                'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n              item.disabled && 'ant-steps-item-disabled',\n            )}\n            role=\"listitem\"\n            aria-current={index === current ? 'step' : undefined}\n            aria-labelledby={titleId}\n            aria-describedby={statusId}\n            aria-posinset={index + 1}\n            aria-setsize={resolvedItems.length}\n          >\n            {direction === 'horizontal' ? (\n              <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'ant-steps-item-tail tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n                    <span className=\"ant-steps-icon\">\n                      <span className=\"ant-steps-icon-dot\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        index === 0 && 'ant-steps-item-tail',\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    id={titleId}\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  <span id={statusId} className=\"tw-sr-only\">\n                    {a11yText.status[stepStatus]}\n                  </span>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--content-tertiary)]'\n                          : 'tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ) : (\n              <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n                <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-tail ant-steps-item-tail',\n                        index < current\n                          ? 'ald-steps-item-tail-finish'\n                          : 'ald-steps-item-tail-wait',\n                        'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n                        index < current\n                          ? 'tw-bg-[var(--border-brand-strong)]'\n                          : 'tw-bg-[var(--border-default)]',\n                      )}\n                      style={{ width: 1.5, bottom: -24 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n                    <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n                      <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    id={titleId}\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--content-tertiary)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--content-brand-primary)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--content-primary)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--content-negative-secondary)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  <span id={statusId} className=\"tw-sr-only\">\n                    {a11yText.status[stepStatus]}\n                  </span>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":"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"}

package/dist/Switch/index.d.ts

@@ -16,6 +16,11 @@ export interface ISwitchProps {
     'data-testid'?: string;
     /** 透传到内部 switch 按钮元素的 aria-label，用于可访问性与自动化测试定位 */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-busy'?: React.AriaAttributes['aria-busy'];
 }
 declare const Switch: React.FC<ISwitchProps>;
 export default Switch;

package/dist/Switch/index.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
 import DisabledContext from "../ConfigProvider/DisabledContext.js";
 import SizeContext from "../ConfigProvider/sizeContext.js";
-import { useContext, useEffect, useState } from "react";
+import { getSemanticOwnerAriaProps } from "../_utils/formControlSemanticOwner.js";
+import React, { useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Switch/index.tsx
 var switchSizeConfig = {
@@ -21,10 +22,11 @@ var switchSizeConfig = {
 		thumbSize: 8
 	}
 };
-var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children, "data-testid": dataTestid, "aria-label": ariaLabel }) => {
+var Switch = ({ className = "", disabled: customDisabled, loading = false, size: customSize, checked, defaultChecked, onChange, onClick, children, "data-testid": dataTestid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-busy": ariaBusy }) => {
 	const contentSize = useContext(SizeContext);
 	const size = customSize || contentSize || "middle";
 	const [userChecked, setUserChecked] = useState(typeof checked === "undefined" ? defaultChecked : checked);
+	const switchLabelId = React.useId();
 	const disabled = useContext(DisabledContext);
 	const currentDisabled = loading ? true : customDisabled ?? disabled;
 	useEffect(() => {
@@ -40,6 +42,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
 	const { trackW, trackH, thumbSize } = switchSizeConfig[size];
 	const thumbOffset = 2;
 	const thumbTranslate = trackW - thumbSize - thumbOffset * 2;
+	const generatedLabelledBy = ariaLabelledBy || (!ariaLabel && children != null ? switchLabelId : void 0);
 	return /* @__PURE__ */ jsxs("span", {
 		className: cn(className, "ald-switch tw-inline-flex tw-items-center tw-gap-1.5 tw-text-[0]", `ald-switch-${size}`, currentDisabled && "tw-pointer-events-none tw-cursor-default", {
 			"ald-switch-disabled": currentDisabled,
@@ -50,16 +53,29 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
 			role: "switch",
 			"aria-checked": !!userChecked,
 			"data-testid": dataTestid,
-			"aria-label": ariaLabel,
+			...getSemanticOwnerAriaProps({
+				"aria-label": ariaLabel,
+				"aria-labelledby": generatedLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid,
+				"aria-required": ariaRequired,
+				"aria-busy": loading || ariaBusy || void 0
+			}),
 			disabled: currentDisabled,
-			className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--action-primary-normal)] hover:tw-bg-[var(--action-primary-hover)]" : "tw-bg-[var(--semantic-neutral-500)]", currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
+			className: cn("ald-switch-btn tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-rounded-full tw-border-0 tw-p-0 tw-transition-colors tw-duration-200", userChecked ? "tw-bg-[var(--control-state-selected)]" : "tw-bg-[var(--control-state-unselected)]", !currentDisabled && [
+				"focus-visible:tw-shadow-[0_0_0_2px_var(--focus-ring)]",
+				"forced-colors:focus-visible:tw-outline",
+				"forced-colors:focus-visible:tw-outline-2",
+				"forced-colors:focus-visible:tw-outline-offset-2",
+				"forced-colors:focus-visible:tw-outline-[Highlight]"
+			], currentDisabled && "tw-cursor-not-allowed tw-opacity-40"),
 			style: {
 				width: trackW,
 				height: trackH
 			},
 			onClick: handleClick,
 			children: /* @__PURE__ */ jsx("span", {
-				className: cn("tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-sm tw-transition-transform tw-duration-200"),
+				className: cn("tw-block tw-rounded-full tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-sm)] tw-transition-transform tw-duration-200"),
 				style: {
 					width: thumbSize,
 					height: thumbSize,
@@ -68,6 +84,7 @@ var Switch = ({ className = "", disabled: customDisabled, loading = false, size:
 				}
 			})
 		}), children && /* @__PURE__ */ jsx("span", {
+			id: generatedLabelledBy === switchLabelId ? switchLabelId : void 0,
 			className: cn("ald-switch-text tw-inline-flex tw-items-center tw-align-middle tw-text-[var(--content-primary)]", size === "large" && "tw-h-5 tw-text-base tw-leading-5", size === "middle" && "tw-h-4 tw-text-sm tw-leading-4", size === "small" && "tw-h-3 tw-text-xs tw-leading-3", currentDisabled && "tw-opacity-50"),
 			children
 		})]