@hanwenbo/x-taro-ui 0.0.1

package/lib/components/transfer/transfer.js

@@ -0,0 +1,662 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/transfer/transfer.tsx
+var transfer_exports = {};
+__export(transfer_exports, {
+  default: () => transfer_default
+});
+module.exports = __toCommonJS(transfer_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_locale = require("../../utils/locale");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_input = require("../input");
+var import_tokens = require("./tokens");
+var TRANSFER_SIZE_METRICS = {
+  mini: {
+    actionSize: 28,
+    headerPaddingBlock: 8,
+    itemGap: 8,
+    itemMinHeight: 36,
+    itemPaddingBlock: 8
+  },
+  small: {
+    actionSize: 28,
+    headerPaddingBlock: 8,
+    itemGap: 8,
+    itemMinHeight: 36,
+    itemPaddingBlock: 8
+  },
+  middle: {
+    actionSize: 32,
+    headerPaddingBlock: 10,
+    itemGap: 12,
+    itemMinHeight: 42,
+    itemPaddingBlock: 10
+  },
+  large: {
+    actionSize: 36,
+    headerPaddingBlock: 12,
+    itemGap: 14,
+    itemMinHeight: 48,
+    itemPaddingBlock: 12
+  }
+};
+function isActivationKey(event) {
+  return event.key === "Enter" || event.key === " ";
+}
+function renderNode(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+}
+function nodeText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (import_react.default.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return "";
+}
+var Transfer = (props) => {
+  const hasTargetKeysProp = Object.prototype.hasOwnProperty.call(props, "targetKeys");
+  const hasSelectedKeysProp = Object.prototype.hasOwnProperty.call(props, "selectedKeys");
+  const {
+    dataSource = [],
+    targetKeys,
+    selectedKeys: controlledSelectedKeys,
+    defaultTargetKeys = [],
+    searchable = false,
+    showSearch,
+    filterOption,
+    onSearch,
+    onSelectChange,
+    locale,
+    status,
+    listStyle,
+    disabled: propDisabled = false,
+    oneWay = false,
+    size: propSize,
+    titles: propTitles,
+    emptyText,
+    renderItem,
+    render,
+    onChange,
+    className,
+    style
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, motion } = (0, import_theme.useTokens)();
+  const size = propSize ?? config.size;
+  const disabled = Boolean(propDisabled || config.disabled);
+  const isSearchable = showSearch ?? searchable;
+  const defaultTitle = (0, import_locale.resolveLocaleText)(config.locale, "common.empty", "暂无数据");
+  const titles = propTitles ?? [defaultTitle, defaultTitle];
+  const resolvedEmptyText = (locale == null ? void 0 : locale.notFoundContent) ?? emptyText ?? (0, import_locale.resolveLocaleText)(config.locale, "empty.text", "暂无数据");
+  const typography = (0, import_tokens.useTransferTypographyTokens)(size);
+  const controlTokens = (0, import_theme.getFormControlTokens)(size);
+  const sizeMetrics = TRANSFER_SIZE_METRICS[size];
+  const [innerTargetKeys, setInnerTargetKeys] = (0, import_react.useState)(defaultTargetKeys);
+  const [innerSelectedKeys, setInnerSelectedKeys] = (0, import_react.useState)([]);
+  const [sourceQuery, setSourceQuery] = (0, import_react.useState)("");
+  const [targetQuery, setTargetQuery] = (0, import_react.useState)("");
+  const [pressedItemKey, setPressedItemKey] = (0, import_react.useState)(null);
+  const [pressedAction, setPressedAction] = (0, import_react.useState)(null);
+  const currentTargetKeys = hasTargetKeysProp ? targetKeys ?? [] : innerTargetKeys;
+  const currentSelectedKeys = hasSelectedKeysProp ? controlledSelectedKeys ?? [] : innerSelectedKeys;
+  const sourceItems = (0, import_react.useMemo)(
+    () => dataSource.filter((item) => !currentTargetKeys.includes(item.key)),
+    [currentTargetKeys, dataSource]
+  );
+  const targetItems = (0, import_react.useMemo)(
+    () => dataSource.filter((item) => currentTargetKeys.includes(item.key)),
+    [currentTargetKeys, dataSource]
+  );
+  const sourceSelectedKeys = (0, import_react.useMemo)(
+    () => currentSelectedKeys.filter((key) => !currentTargetKeys.includes(key)),
+    [currentSelectedKeys, currentTargetKeys]
+  );
+  const targetSelectedKeys = (0, import_react.useMemo)(
+    () => currentSelectedKeys.filter((key) => currentTargetKeys.includes(key)),
+    [currentSelectedKeys, currentTargetKeys]
+  );
+  const sourceMovableKeys = (0, import_react.useMemo)(
+    () => sourceSelectedKeys.filter((key) => {
+      const item = sourceItems.find((candidate) => candidate.key === key);
+      return Boolean(item && !item.disabled);
+    }),
+    [sourceItems, sourceSelectedKeys]
+  );
+  const targetMovableKeys = (0, import_react.useMemo)(
+    () => targetSelectedKeys.filter((key) => {
+      const item = targetItems.find((candidate) => candidate.key === key);
+      return Boolean(item && !item.disabled);
+    }),
+    [targetItems, targetSelectedKeys]
+  );
+  const filterItems = (0, import_react.useCallback)(
+    (items, query) => {
+      if (!query) return items;
+      return items.filter(
+        (item) => filterOption ? filterOption(query, item) : nodeText(item.title).toLowerCase().includes(query.toLowerCase())
+      );
+    },
+    [filterOption]
+  );
+  const filteredSourceItems = (0, import_react.useMemo)(
+    () => filterItems(sourceItems, sourceQuery),
+    [filterItems, sourceItems, sourceQuery]
+  );
+  const filteredTargetItems = (0, import_react.useMemo)(
+    () => filterItems(targetItems, targetQuery),
+    [filterItems, targetItems, targetQuery]
+  );
+  const emitSelectedKeys = (0, import_react.useCallback)(
+    (nextSelectedKeys, nextTargetKeys = currentTargetKeys) => {
+      if (!hasSelectedKeysProp) setInnerSelectedKeys(nextSelectedKeys);
+      onSelectChange == null ? void 0 : onSelectChange(
+        nextSelectedKeys.filter((key) => !nextTargetKeys.includes(key)),
+        nextSelectedKeys.filter((key) => nextTargetKeys.includes(key))
+      );
+    },
+    [currentTargetKeys, hasSelectedKeysProp, onSelectChange]
+  );
+  const toggleItem = (0, import_react.useCallback)(
+    (item) => {
+      if (disabled || item.disabled) return;
+      const nextSelectedKeys = currentSelectedKeys.includes(item.key) ? currentSelectedKeys.filter((key) => key !== item.key) : [...currentSelectedKeys, item.key];
+      emitSelectedKeys(nextSelectedKeys);
+    },
+    [currentSelectedKeys, disabled, emitSelectedKeys]
+  );
+  const toggleAll = (0, import_react.useCallback)(
+    (items) => {
+      const selectableKeys = items.filter((item) => !item.disabled).map((item) => item.key);
+      const allSelected = selectableKeys.length > 0 && selectableKeys.every((key) => currentSelectedKeys.includes(key));
+      const nextSelectedKeys = allSelected ? currentSelectedKeys.filter((key) => !selectableKeys.includes(key)) : [.../* @__PURE__ */ new Set([...currentSelectedKeys, ...selectableKeys])];
+      emitSelectedKeys(nextSelectedKeys);
+    },
+    [currentSelectedKeys, emitSelectedKeys]
+  );
+  const move = (0, import_react.useCallback)(
+    (direction) => {
+      const movedKeys = direction === "right" ? sourceMovableKeys : targetMovableKeys;
+      const nextTargetKeys = direction === "right" ? [.../* @__PURE__ */ new Set([...currentTargetKeys, ...movedKeys])] : currentTargetKeys.filter((key) => !movedKeys.includes(key));
+      if (!hasTargetKeysProp) setInnerTargetKeys(nextTargetKeys);
+      onChange == null ? void 0 : onChange(nextTargetKeys, direction, movedKeys);
+      emitSelectedKeys(
+        currentSelectedKeys.filter((key) => !movedKeys.includes(key)),
+        nextTargetKeys
+      );
+    },
+    [
+      currentSelectedKeys,
+      currentTargetKeys,
+      emitSelectedKeys,
+      hasTargetKeysProp,
+      onChange,
+      sourceMovableKeys,
+      targetMovableKeys
+    ]
+  );
+  const renderCheckbox = (checked, indeterminate, label, onClick, checkboxDisabled = false) => {
+    const interactionDisabled = disabled || checkboxDisabled;
+    const selected = checked || indeterminate;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        role: "checkbox",
+        ariaLabel: label,
+        "aria-checked": indeterminate ? "mixed" : checked,
+        "aria-disabled": interactionDisabled,
+        tabIndex: interactionDisabled ? -1 : 0,
+        "data-slot": "transfer-checkbox",
+        "data-checked": checked ? "true" : "false",
+        "data-indeterminate": indeterminate ? "true" : "false",
+        "data-disabled": interactionDisabled ? "true" : "false",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-transfer__checkbox`,
+          checked && `${config.prefixCls}-transfer__checkbox--checked`,
+          indeterminate && `${config.prefixCls}-transfer__checkbox--indeterminate`
+        ),
+        onClick: (event) => {
+          var _a;
+          (_a = event.stopPropagation) == null ? void 0 : _a.call(event);
+          if (!interactionDisabled) onClick(event);
+        },
+        onKeyDown: (event) => {
+          var _a, _b;
+          (_a = event.stopPropagation) == null ? void 0 : _a.call(event);
+          if (!isActivationKey(event) || interactionDisabled) return;
+          (_b = event.preventDefault) == null ? void 0 : _b.call(event);
+          onClick(event);
+        },
+        style: {
+          boxSizing: "border-box",
+          width: 16,
+          height: 16,
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: selected ? colors.primary : colors.border,
+          borderRadius: "var(--x-transfer-checkbox-radius)",
+          backgroundColor: selected ? colors.primary : colors.background,
+          opacity: interactionDisabled ? 0.45 : 1,
+          cursor: interactionDisabled ? "not-allowed" : "pointer",
+          transition: `background-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, border-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, opacity ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`
+        }
+      },
+      checked ? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Check", size: 11, color: colors["primary-foreground"] }) : indeterminate ? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Minus", size: 11, color: colors["primary-foreground"] }) : null
+    );
+  };
+  const renderPanel = (direction, panelTitle, items, panelSelectedKeys, query, setQuery) => {
+    const selectableItems = items.filter((item) => !item.disabled);
+    const selectableSelectedCount = selectableItems.filter(
+      (item) => panelSelectedKeys.includes(item.key)
+    ).length;
+    const visibleSelectedCount = items.filter((item) => panelSelectedKeys.includes(item.key)).length;
+    const allSelected = selectableItems.length > 0 && selectableSelectedCount === selectableItems.length;
+    const partiallySelected = selectableSelectedCount > 0 && !allSelected;
+    const itemUnit = (locale == null ? void 0 : locale.itemUnit) ?? (0, import_locale.resolveLocaleText)(config.locale, "transfer.item", "项");
+    const itemsUnit = (locale == null ? void 0 : locale.itemsUnit) ?? (0, import_locale.resolveLocaleText)(config.locale, "transfer.items", "项");
+    const countUnit = items.length === 1 ? itemUnit : itemsUnit;
+    const panelBorder = status === "error" ? colors.destructive : status === "warning" ? colors.warning : colors.border;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        role: "listbox",
+        ariaLabel: nodeText(panelTitle),
+        "data-slot": direction === "right" ? "transfer-target-list" : "transfer-source-list",
+        "data-direction": direction,
+        "data-status": status ?? "default",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-transfer__list`,
+          `${config.prefixCls}-transfer__list--${direction}`,
+          status && `${config.prefixCls}-transfer__list--${status}`
+        ),
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          borderRadius: "var(--x-transfer-list-radius)",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: panelBorder,
+          backgroundColor: colors.background,
+          overflow: "hidden",
+          ...listStyle
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "transfer-header",
+          className: `${config.prefixCls}-transfer__header`,
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 6,
+            paddingTop: sizeMetrics.headerPaddingBlock,
+            paddingBottom: sizeMetrics.headerPaddingBlock,
+            paddingLeft: controlTokens.inlinePadding,
+            paddingRight: controlTokens.inlinePadding,
+            borderBottom: `1px solid ${colors.border}`,
+            backgroundColor: colors.muted
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            style: {
+              minWidth: 0,
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 6
+            }
+          },
+          renderCheckbox(
+            allSelected,
+            partiallySelected,
+            `${allSelected ? "取消全选" : "全选"}${nodeText(panelTitle)}`,
+            () => toggleAll(items),
+            selectableItems.length === 0
+          ),
+          renderNode(panelTitle, {
+            minWidth: 0,
+            fontSize: typography.headerTitleFontSize,
+            fontWeight: typography.headerTitleFontWeight,
+            color: colors.foreground,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          })
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            "data-slot": "transfer-count",
+            "data-selected-count": visibleSelectedCount,
+            "data-item-count": items.length,
+            className: `${config.prefixCls}-transfer__count`,
+            style: {
+              flexShrink: 0,
+              fontSize: typography.countFontSize,
+              color: colors["muted-foreground"]
+            }
+          },
+          visibleSelectedCount > 0 ? `${visibleSelectedCount}/` : "",
+          items.length,
+          " ",
+          countUnit
+        )
+      ),
+      isSearchable ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "transfer-search",
+          className: `${config.prefixCls}-transfer__search`,
+          style: { padding: 8, borderBottom: `1px solid ${colors.border}` }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_input.Input,
+          {
+            className: `${config.prefixCls}-transfer__search-input`,
+            testID: `transfer-search-${direction}`,
+            value: query,
+            size: size === "mini" ? "mini" : size === "large" ? "large" : "small",
+            prefix: /* @__PURE__ */ import_react.default.createElement(
+              import_icon.Icon,
+              {
+                name: "Search",
+                size: controlTokens.iconSize,
+                color: colors["muted-foreground"]
+              }
+            ),
+            placeholder: (locale == null ? void 0 : locale.searchPlaceholder) ?? (0, import_locale.resolveLocaleText)(config.locale, "search.placeholder", "搜索"),
+            ariaLabel: `${direction === "left" ? nodeText(titles[0]) : nodeText(titles[1])}搜索`,
+            disabled,
+            style: { borderRadius: "var(--x-transfer-search-radius)" },
+            onChange: (nextValue) => {
+              setQuery(nextValue);
+              onSearch == null ? void 0 : onSearch(direction, nextValue);
+            }
+          }
+        )
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.ScrollView,
+        {
+          scrollY: true,
+          "data-slot": "transfer-list-body",
+          className: `${config.prefixCls}-transfer__body`,
+          style: {
+            minHeight: 200,
+            maxHeight: 240,
+            flex: 1
+          }
+        },
+        items.length > 0 ? items.map((item, itemIndex) => {
+          var _a;
+          const selected = panelSelectedKeys.includes(item.key);
+          const itemDisabled = disabled || Boolean(item.disabled);
+          const itemPressed = pressedItemKey === item.key && !itemDisabled;
+          const customContent = (_a = renderItem ?? render) == null ? void 0 : _a(item);
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              key: item.key,
+              role: "option",
+              ariaLabel: `${nodeText(item.title) || item.key}${selected ? "，已选中" : ""}${item.disabled ? "，已禁用" : ""}`,
+              "aria-selected": selected,
+              "aria-disabled": itemDisabled,
+              tabIndex: itemDisabled ? -1 : 0,
+              "data-slot": "transfer-item",
+              "data-key": item.key,
+              "data-selected": selected ? "true" : "false",
+              "data-disabled": itemDisabled ? "true" : "false",
+              className: (0, import_utils.classNames)(
+                `${config.prefixCls}-transfer__item`,
+                selected && `${config.prefixCls}-transfer__item--selected`,
+                item.disabled && `${config.prefixCls}-transfer__item--disabled`
+              ),
+              onClick: () => toggleItem(item),
+              onKeyDown: (event) => {
+                var _a2;
+                if (!isActivationKey(event) || itemDisabled) return;
+                (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+                toggleItem(item);
+              },
+              onMouseDown: () => !itemDisabled && setPressedItemKey(item.key),
+              onMouseUp: () => setPressedItemKey(null),
+              onMouseLeave: () => setPressedItemKey(null),
+              onTouchStart: () => !itemDisabled && setPressedItemKey(item.key),
+              onTouchEnd: () => setPressedItemKey(null),
+              onTouchCancel: () => setPressedItemKey(null),
+              style: {
+                boxSizing: "border-box",
+                minHeight: sizeMetrics.itemMinHeight,
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: sizeMetrics.itemGap,
+                padding: `${sizeMetrics.itemPaddingBlock}px ${controlTokens.inlinePadding}px`,
+                borderBottomWidth: itemIndex === items.length - 1 ? 0 : 1,
+                borderBottomStyle: "solid",
+                borderBottomColor: colors.border,
+                opacity: itemDisabled ? 0.45 : 1,
+                backgroundColor: selected ? colors.accent : itemPressed ? (0, import_theme.withOpacity)(colors.accent, 0.5) : colors.background,
+                cursor: itemDisabled ? "not-allowed" : "pointer",
+                transition: `background-color 150ms ${motion.easing.standard}, opacity 150ms ${motion.easing.standard}`
+              }
+            },
+            renderCheckbox(
+              selected,
+              false,
+              `${selected ? "取消选择" : "选择"}${nodeText(item.title) || item.key}`,
+              () => toggleItem(item),
+              item.disabled
+            ),
+            /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { flex: 1, minWidth: 0 } }, customContent !== void 0 ? customContent : /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", flexDirection: "column", minWidth: 0 } }, renderNode(item.title, {
+              fontSize: typography.itemFontSize,
+              color: colors.foreground,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }), item.description ? renderNode(item.description, {
+              marginTop: 2,
+              fontSize: typography.descriptionFontSize,
+              color: colors["muted-foreground"],
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }) : null))
+          );
+        }) : /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "transfer-empty",
+            className: `${config.prefixCls}-transfer__empty`,
+            style: {
+              minHeight: 160,
+              padding: 18,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          },
+          renderNode(resolvedEmptyText, {
+            fontSize: typography.emptyFontSize,
+            color: colors["muted-foreground"],
+            textAlign: "center"
+          })
+        )
+      )
+    );
+  };
+  const renderAction = (direction, actionDisabled, label) => {
+    const isPressed = pressedAction === direction && !actionDisabled;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        role: "button",
+        ariaLabel: nodeText(label),
+        "aria-disabled": actionDisabled,
+        tabIndex: actionDisabled ? -1 : 0,
+        "data-slot": direction === "right" ? "transfer-move-to-target" : "transfer-move-to-source",
+        "data-direction": direction,
+        "data-disabled": actionDisabled ? "true" : "false",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-transfer__action`,
+          `${config.prefixCls}-transfer__action--${direction}`,
+          actionDisabled && `${config.prefixCls}-transfer__action--disabled`
+        ),
+        onClick: () => !actionDisabled && move(direction),
+        onKeyDown: (event) => {
+          var _a;
+          if (!isActivationKey(event) || actionDisabled) return;
+          (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+          move(direction);
+        },
+        onMouseDown: () => !actionDisabled && setPressedAction(direction),
+        onMouseUp: () => setPressedAction(null),
+        onMouseLeave: () => setPressedAction(null),
+        onTouchStart: () => !actionDisabled && setPressedAction(direction),
+        onTouchEnd: () => setPressedAction(null),
+        onTouchCancel: () => setPressedAction(null),
+        style: {
+          boxSizing: "border-box",
+          width: sizeMetrics.actionSize,
+          height: sizeMetrics.actionSize,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: isPressed ? colors.primary : colors.border,
+          borderRadius: "var(--x-transfer-action-radius)",
+          backgroundColor: actionDisabled ? colors.muted : isPressed ? colors.accent : colors.background,
+          opacity: actionDisabled ? 0.45 : 1,
+          cursor: actionDisabled ? "not-allowed" : "pointer",
+          transition: `background-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, border-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, opacity ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_icon.Icon,
+        {
+          name: direction === "right" ? "ChevronRight" : "ChevronLeft",
+          size: 16,
+          color: actionDisabled ? colors["muted-foreground"] : isPressed ? colors.primary : colors.foreground
+        }
+      )
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "aria-disabled": disabled,
+      "data-slot": "transfer-root",
+      "data-size": size,
+      "data-disabled": disabled ? "true" : "false",
+      "data-status": status ?? "default",
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-transfer`,
+        `${config.prefixCls}-transfer--${size}`,
+        disabled && `${config.prefixCls}-transfer--disabled`,
+        className
+      ),
+      style: {
+        boxSizing: "border-box",
+        width: "100%",
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "row",
+        gap: 8,
+        alignItems: "stretch",
+        opacity: disabled ? 0.5 : 1,
+        pointerEvents: disabled ? "none" : void 0,
+        userSelect: "none",
+        ...style
+      }
+    },
+    renderPanel(
+      "left",
+      titles[0],
+      filteredSourceItems,
+      sourceSelectedKeys,
+      sourceQuery,
+      setSourceQuery
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "transfer-actions",
+        className: `${config.prefixCls}-transfer__actions`,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 8
+        }
+      },
+      renderAction(
+        "right",
+        disabled || sourceMovableKeys.length === 0,
+        (0, import_locale.resolveLocaleText)(config.locale, "transfer.moveToTarget", "移动到右侧")
+      ),
+      !oneWay ? renderAction(
+        "left",
+        disabled || targetMovableKeys.length === 0,
+        (0, import_locale.resolveLocaleText)(config.locale, "transfer.moveToSource", "移动到左侧")
+      ) : null
+    ),
+    renderPanel(
+      "right",
+      titles[1],
+      filteredTargetItems,
+      targetSelectedKeys,
+      targetQuery,
+      setTargetQuery
+    )
+  );
+};
+Transfer.displayName = "Transfer";
+var transfer_default = Transfer;