musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/search/bar.mjs

@@ -0,0 +1,78 @@
+import { Button } from '../button/button.mjs';
+import IconSearch from '../icon/icons/action/search.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { stringify } from '@aiszlab/relax/class-name';
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import SearchField from './field.mjs';
+import styles from './styles.mjs';
+import IconClose from '../icon/icons/navigation/close.mjs';
+
+var SearchBar = function SearchBar(_ref) {
+  var clearable = _ref.clearable,
+    disabled = _ref.disabled,
+    leading = _ref.leading,
+    placeholder = _ref.placeholder,
+    searchButton = _ref.searchButton,
+    trailing = _ref.trailing,
+    inputRef = _ref.inputRef,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    onClear = _ref.onClear,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    onSearch = _ref.onSearch;
+  var classNames = useClassNames(CLASS_NAMES);
+  var hasValue = value.length > 0;
+  var styled = {
+    leading: props(styles.leading.base),
+    trailing: props(styles.trailing.base),
+    clear: props(styles.clear.base),
+    searchButton: props(styles.searchButton.base)
+  };
+  var clearAction = hasValue && clearable && !disabled && (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: stringify(classNames.searchClear, styled.clear.className),
+    style: styled.clear.style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onClear();
+    },
+    "aria-label": "Clear search"
+  }, /*#__PURE__*/React.createElement(IconClose, {
+    size: 24
+  })));
+  var searchButtonAction = searchButton && (/*#__PURE__*/React.createElement(Button, {
+    className: stringify(classNames.searchButton, styled.searchButton.className),
+    style: styled.searchButton.style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onSearch();
+    },
+    disabled: disabled
+  }, searchButton));
+  var hasConsumerTrailing = !!trailing;
+  var hasTrailing = !!clearAction || hasConsumerTrailing || !!searchButtonAction;
+  return /*#__PURE__*/React.createElement(SearchField, {
+    inputRef: inputRef,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    leading: /*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchLeading, styled.leading.className),
+      style: styled.leading.style
+    }, leading !== null && leading !== void 0 ? leading : /*#__PURE__*/React.createElement(IconSearch, {
+      size: 24
+    })),
+    trailing: hasTrailing ? (/*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchTrailing, styled.trailing.className),
+      style: styled.trailing.style
+    }, clearAction, trailing, searchButtonAction)) : undefined
+  });
+};
+
+export { SearchBar as default };

package/dist/components/search/context.cjs

@@ -7,9 +7,25 @@
 var CLASS_NAMES = {
   search: "search",
   searchInput: "search-input",
+  searchInputControl: "search-input__control",
   searchLeading: "search-leading",
+  searchTrailing: "search-trailing",
   searchClear: "search-clear",
   searchButton: "search-button",
+  searchView: "search-view",
+  searchViewOverlay: "search-view__overlay",
+  searchViewPanel: "search-view__panel",
+  searchViewHeader: "search-view__header",
+  searchViewAction: "search-view__action",
+  searchResultList: "search-result-list",
+  searchResultItem: "search-result-list__item",
+  searchResultItemActive: "search-result-list__item--active",
+  searchResultItemDisabled: "search-result-list__item--disabled",
+  searchResultItemLeading: "search-result-list__item-leading",
+  searchResultItemContent: "search-result-list__item-content",
+  searchResultItemLabel: "search-result-list__item-label",
+  searchResultItemSupportingText: "search-result-list__item-supporting-text",
+  searchResultItemTrailing: "search-result-list__item-trailing",
   focused: "search--focused",
   disabled: "search--disabled"
 };

package/dist/components/search/context.d.ts

@@ -5,9 +5,25 @@
 export declare const CLASS_NAMES: {
     readonly search: "search";
     readonly searchInput: "search-input";
+    readonly searchInputControl: "search-input__control";
     readonly searchLeading: "search-leading";
+    readonly searchTrailing: "search-trailing";
     readonly searchClear: "search-clear";
     readonly searchButton: "search-button";
+    readonly searchView: "search-view";
+    readonly searchViewOverlay: "search-view__overlay";
+    readonly searchViewPanel: "search-view__panel";
+    readonly searchViewHeader: "search-view__header";
+    readonly searchViewAction: "search-view__action";
+    readonly searchResultList: "search-result-list";
+    readonly searchResultItem: "search-result-list__item";
+    readonly searchResultItemActive: "search-result-list__item--active";
+    readonly searchResultItemDisabled: "search-result-list__item--disabled";
+    readonly searchResultItemLeading: "search-result-list__item-leading";
+    readonly searchResultItemContent: "search-result-list__item-content";
+    readonly searchResultItemLabel: "search-result-list__item-label";
+    readonly searchResultItemSupportingText: "search-result-list__item-supporting-text";
+    readonly searchResultItemTrailing: "search-result-list__item-trailing";
     readonly focused: "search--focused";
     readonly disabled: "search--disabled";
 };

package/dist/components/search/context.mjs

@@ -5,9 +5,25 @@
 var CLASS_NAMES = {
   search: "search",
   searchInput: "search-input",
+  searchInputControl: "search-input__control",
   searchLeading: "search-leading",
+  searchTrailing: "search-trailing",
   searchClear: "search-clear",
   searchButton: "search-button",
+  searchView: "search-view",
+  searchViewOverlay: "search-view__overlay",
+  searchViewPanel: "search-view__panel",
+  searchViewHeader: "search-view__header",
+  searchViewAction: "search-view__action",
+  searchResultList: "search-result-list",
+  searchResultItem: "search-result-list__item",
+  searchResultItemActive: "search-result-list__item--active",
+  searchResultItemDisabled: "search-result-list__item--disabled",
+  searchResultItemLeading: "search-result-list__item-leading",
+  searchResultItemContent: "search-result-list__item-content",
+  searchResultItemLabel: "search-result-list__item-label",
+  searchResultItemSupportingText: "search-result-list__item-supporting-text",
+  searchResultItemTrailing: "search-result-list__item-trailing",
   focused: "search--focused",
   disabled: "search--disabled"
 };

package/dist/components/search/field.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('@aiszlab/relax/class-name');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var theme = require('../theme/theme.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+var _excluded = ["disabled", "inputRef", "leading", "onChange", "onFocus", "onKeyDown", "placeholder", "shape", "trailing", "value"];
+var SearchField = function SearchField(_ref) {
+  var disabled = _ref.disabled,
+    inputRef = _ref.inputRef,
+    leading = _ref.leading,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    placeholder = _ref.placeholder,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "pill" : _ref$shape,
+    trailing = _ref.trailing,
+    value = _ref.value,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var ownedInputRef = React.useRef(null);
+  var composedInputRef = relax.useComposedRef(ownedInputRef, inputRef);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "surface-container-high", "on-surface", "on-surface-variant", ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thickest]]);
+  var styled = {
+    root: stylex.props(theme.$body.large, styles.default.field.root, shape === "pill" ? styles.default.field.pill : styles.default.field.standard, !disabled && styles.default.field.enabled, disabled && styles.default.field.disabled),
+    input: stylex.props(styles.default.fieldInput.base, disabled && styles.default.fieldInput.disabled)
+  };
+  var handleChange = function handleChange(event) {
+    onChange(event.currentTarget.value);
+  };
+  return /*#__PURE__*/React.createElement("div", _objectSpread({
+    className: className.stringify(classNames.searchInput, styled.root.className),
+    style: _objectSpread(_objectSpread({}, styled.root.style), themeColorVars)
+  }, !disabled && {
+    onClick: function onClick() {
+      var _ownedInputRef$curren;
+      (_ownedInputRef$curren = ownedInputRef.current) === null || _ownedInputRef$curren === void 0 || _ownedInputRef$curren.focus();
+    }
+  }), leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+    ref: composedInputRef,
+    className: className.stringify(classNames.searchInputControl, styled.input.className),
+    style: styled.input.style,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: handleChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  })), trailing);
+};
+
+exports.default = SearchField;

package/dist/components/search/field.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { InputHTMLAttributes, KeyboardEventHandler, ReactNode, Ref } from "react";
+/**
+ * @zh 私有 Search 输入区域属性
+ * @en Private Search input field props
+ */
+export type SearchFieldProps = Pick<InputHTMLAttributes<HTMLInputElement>, "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "onFocus" | "role"> & {
+    inputRef: Ref<HTMLInputElement>;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    shape?: "pill" | "standard";
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    onChange: (value: string) => void;
+    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+};
+declare const SearchField: ({ disabled, inputRef, leading, onChange, onFocus, onKeyDown, placeholder, shape, trailing, value, ...inputProps }: SearchFieldProps) => React.JSX.Element;
+export default SearchField;

package/dist/components/search/field.mjs

@@ -0,0 +1,60 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useComposedRef } from '@aiszlab/relax';
+import { stringify } from '@aiszlab/relax/class-name';
+import React, { useRef } from 'react';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { $body } from '../theme/theme.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import styles from './styles.mjs';
+
+var _excluded = ["disabled", "inputRef", "leading", "onChange", "onFocus", "onKeyDown", "placeholder", "shape", "trailing", "value"];
+var SearchField = function SearchField(_ref) {
+  var disabled = _ref.disabled,
+    inputRef = _ref.inputRef,
+    leading = _ref.leading,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    placeholder = _ref.placeholder,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "pill" : _ref$shape,
+    trailing = _ref.trailing,
+    value = _ref.value,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames(CLASS_NAMES);
+  var ownedInputRef = useRef(null);
+  var composedInputRef = useComposedRef(ownedInputRef, inputRef);
+  var themeColorVars = useThemeColorVars(["primary", "surface-container-high", "on-surface", "on-surface-variant", ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thickest]]);
+  var styled = {
+    root: props($body.large, styles.field.root, shape === "pill" ? styles.field.pill : styles.field.standard, !disabled && styles.field.enabled, disabled && styles.field.disabled),
+    input: props(styles.fieldInput.base, disabled && styles.fieldInput.disabled)
+  };
+  var handleChange = function handleChange(event) {
+    onChange(event.currentTarget.value);
+  };
+  return /*#__PURE__*/React.createElement("div", _objectSpread({
+    className: stringify(classNames.searchInput, styled.root.className),
+    style: _objectSpread(_objectSpread({}, styled.root.style), themeColorVars)
+  }, !disabled && {
+    onClick: function onClick() {
+      var _ownedInputRef$curren;
+      (_ownedInputRef$curren = ownedInputRef.current) === null || _ownedInputRef$curren === void 0 || _ownedInputRef$curren.focus();
+    }
+  }), leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+    ref: composedInputRef,
+    className: stringify(classNames.searchInputControl, styled.input.className),
+    style: styled.input.style,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: handleChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  })), trailing);
+};
+
+export { SearchField as default };

package/dist/components/search/hooks.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var relax = require('@aiszlab/relax');
+var React = require('react');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+
+var subscribeToMobile = function subscribeToMobile(listener) {
+  var media = window.matchMedia(tokens_stylex.mediaQueries.mobile);
+  media.addEventListener("change", listener);
+  return function () {
+    return media.removeEventListener("change", listener);
+  };
+};
+var getMobileSnapshot = function getMobileSnapshot() {
+  return window.matchMedia(tokens_stylex.mediaQueries.mobile).matches;
+};
+var getServerMobileSnapshot = function getServerMobileSnapshot() {
+  return false;
+};
+/**
+ * @zh 解析当前视口适用的 Search View 展示模式
+ * @en Resolve the Search View display mode for the current viewport
+ */
+var useResolvedSearchView = function useResolvedSearchView(view) {
+  var isMobile = React.useSyncExternalStore(subscribeToMobile, getMobileSnapshot, getServerMobileSnapshot);
+  return view === "auto" ? isMobile ? "full-screen" : "modal" : view;
+};
+/**
+ * @zh 获取下一个可用 Search 结果项的键值
+ * @en Get the key of the next enabled Search result item
+ */
+var getAdjacentEnabledKey = function getAdjacentEnabledKey(items, activeKey, direction) {
+  var enabledItems = items.filter(function (item) {
+    return !item.disabled;
+  });
+  if (enabledItems.length === 0) {
+    return undefined;
+  }
+  if (relax.isUndefined(activeKey)) {
+    return direction === 1 ? enabledItems[0].key : enabledItems[enabledItems.length - 1].key;
+  }
+  var activeIndex = enabledItems.findIndex(function (item) {
+    return item.key === activeKey;
+  });
+  var nextIndex = activeIndex === -1 ? direction === 1 ? 0 : enabledItems.length - 1 : (activeIndex + direction + enabledItems.length) % enabledItems.length;
+  return enabledItems[nextIndex].key;
+};
+
+exports.getAdjacentEnabledKey = getAdjacentEnabledKey;
+exports.useResolvedSearchView = useResolvedSearchView;

package/dist/components/search/hooks.d.ts

@@ -0,0 +1,12 @@
+import type { Key } from "react";
+import type { ResolvedSearchView, SearchItem, SearchView } from "../../types/search";
+/**
+ * @zh 解析当前视口适用的 Search View 展示模式
+ * @en Resolve the Search View display mode for the current viewport
+ */
+export declare const useResolvedSearchView: (view: SearchView) => ResolvedSearchView;
+/**
+ * @zh 获取下一个可用 Search 结果项的键值
+ * @en Get the key of the next enabled Search result item
+ */
+export declare const getAdjacentEnabledKey: (items: SearchItem[], activeKey: Key | undefined, direction: 1 | -1) => Key | undefined;

package/dist/components/search/hooks.mjs

@@ -0,0 +1,47 @@
+import { isUndefined } from '@aiszlab/relax';
+import { useSyncExternalStore } from 'react';
+import { mediaQueries } from '../theme/tokens.stylex.mjs';
+
+var subscribeToMobile = function subscribeToMobile(listener) {
+  var media = window.matchMedia(mediaQueries.mobile);
+  media.addEventListener("change", listener);
+  return function () {
+    return media.removeEventListener("change", listener);
+  };
+};
+var getMobileSnapshot = function getMobileSnapshot() {
+  return window.matchMedia(mediaQueries.mobile).matches;
+};
+var getServerMobileSnapshot = function getServerMobileSnapshot() {
+  return false;
+};
+/**
+ * @zh 解析当前视口适用的 Search View 展示模式
+ * @en Resolve the Search View display mode for the current viewport
+ */
+var useResolvedSearchView = function useResolvedSearchView(view) {
+  var isMobile = useSyncExternalStore(subscribeToMobile, getMobileSnapshot, getServerMobileSnapshot);
+  return view === "auto" ? isMobile ? "full-screen" : "modal" : view;
+};
+/**
+ * @zh 获取下一个可用 Search 结果项的键值
+ * @en Get the key of the next enabled Search result item
+ */
+var getAdjacentEnabledKey = function getAdjacentEnabledKey(items, activeKey, direction) {
+  var enabledItems = items.filter(function (item) {
+    return !item.disabled;
+  });
+  if (enabledItems.length === 0) {
+    return undefined;
+  }
+  if (isUndefined(activeKey)) {
+    return direction === 1 ? enabledItems[0].key : enabledItems[enabledItems.length - 1].key;
+  }
+  var activeIndex = enabledItems.findIndex(function (item) {
+    return item.key === activeKey;
+  });
+  var nextIndex = activeIndex === -1 ? direction === 1 ? 0 : enabledItems.length - 1 : (activeIndex + direction + enabledItems.length) % enabledItems.length;
+  return enabledItems[nextIndex].key;
+};
+
+export { getAdjacentEnabledKey, useResolvedSearchView };

package/dist/components/search/index.d.ts

@@ -1,3 +1,3 @@
 import Search from "./search";
 export { Search };
-export type { SearchRef } from "../../types/search";
+export type { ResolvedSearchView, SearchItem, SearchProps, SearchRef, SearchView, } from "../../types/search";

package/dist/components/search/result-list.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('@aiszlab/relax/class-name');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var theme = require('../theme/theme.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+var SearchResultList = function SearchResultList(_ref) {
+  var activeKey = _ref.activeKey,
+    getOptionId = _ref.getOptionId,
+    id = _ref.id,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    onActiveKeyChange = _ref.onActiveKeyChange,
+    onSelect = _ref.onSelect,
+    renderItem = _ref.renderItem;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["on-surface-variant", ["on-surface", tokens_stylex.OPACITY.thin], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thickest]]);
+  var styled = {
+    root: stylex.props(styles.default.resultList.root),
+    item: stylex.props(styles.default.resultList.item),
+    activeItem: stylex.props(styles.default.resultList.activeItem),
+    disabledItem: stylex.props(styles.default.resultList.disabledItem),
+    leading: stylex.props(styles.default.resultList.leading),
+    content: stylex.props(styles.default.resultList.content),
+    label: stylex.props(theme.$body.large, styles.default.resultList.label),
+    supportingText: stylex.props(theme.$body.medium, styles.default.resultList.supportingText),
+    trailing: stylex.props(styles.default.resultList.trailing)
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    role: "listbox",
+    className: className.stringify(classNames.searchResultList, styled.root.className),
+    style: _objectSpread(_objectSpread({}, styled.root.style), themeColorVars)
+  }, items.map(function (item) {
+    var isActive = !relax.isUndefined(activeKey) && item.key === activeKey;
+    var itemContent = relax.isFunction(renderItem) ? renderItem(item) : undefined;
+    var hasLeading = !!item.leading;
+    var hasSupportingText = !!item.supportingText;
+    var hasTrailing = !!item.trailing;
+    var itemStyles = stylex.props(styles.default.resultList.item, isActive && styles.default.resultList.activeItem, item.disabled && styles.default.resultList.disabledItem);
+    return /*#__PURE__*/React.createElement("div", _objectSpread({
+      key: getOptionId(item.key),
+      id: getOptionId(item.key),
+      role: "option",
+      "aria-selected": isActive,
+      "aria-disabled": item.disabled || undefined,
+      className: className.stringify(classNames.searchResultItem, _defineProperty(_defineProperty({}, classNames.searchResultItemActive, isActive), classNames.searchResultItemDisabled, !!item.disabled), itemStyles.className),
+      style: itemStyles.style
+    }, !item.disabled && {
+      onClick: function onClick() {
+        onActiveKeyChange(item.key);
+        onSelect(item);
+      }
+    }), relax.isFunction(renderItem) ? itemContent : (/*#__PURE__*/React.createElement(React.Fragment, null, hasLeading && (/*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchResultItemLeading, styled.leading.className),
+      style: styled.leading.style
+    }, item.leading)), /*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchResultItemContent, styled.content.className),
+      style: styled.content.style
+    }, /*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchResultItemLabel, styled.label.className),
+      style: styled.label.style
+    }, item.label), hasSupportingText && (/*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchResultItemSupportingText, styled.supportingText.className),
+      style: styled.supportingText.style
+    }, item.supportingText))), hasTrailing && (/*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchResultItemTrailing, styled.trailing.className),
+      style: styled.trailing.style
+    }, item.trailing)))));
+  }));
+};
+
+exports.default = SearchResultList;

package/dist/components/search/result-list.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { Key } from "react";
+import type { SearchItem, SearchProps } from "../../types/search";
+/**
+ * @zh Search 结果列表属性
+ * @en Search result list props
+ */
+export type SearchResultListProps = Pick<SearchProps, "items" | "renderItem"> & {
+    id: string;
+    activeKey?: Key;
+    getOptionId: (key: Key) => string;
+    onActiveKeyChange: (key: Key) => void;
+    onSelect: (item: SearchItem) => void;
+};
+declare const SearchResultList: ({ activeKey, getOptionId, id, items, onActiveKeyChange, onSelect, renderItem, }: SearchResultListProps) => React.JSX.Element;
+export default SearchResultList;

package/dist/components/search/result-list.mjs

@@ -0,0 +1,80 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { isUndefined, isFunction } from '@aiszlab/relax';
+import { stringify } from '@aiszlab/relax/class-name';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { $body } from '../theme/theme.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import styles from './styles.mjs';
+
+var SearchResultList = function SearchResultList(_ref) {
+  var activeKey = _ref.activeKey,
+    getOptionId = _ref.getOptionId,
+    id = _ref.id,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    onActiveKeyChange = _ref.onActiveKeyChange,
+    onSelect = _ref.onSelect,
+    renderItem = _ref.renderItem;
+  var classNames = useClassNames(CLASS_NAMES);
+  var themeColorVars = useThemeColorVars(["on-surface-variant", ["on-surface", OPACITY.thin], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thickest]]);
+  var styled = {
+    root: props(styles.resultList.root),
+    item: props(styles.resultList.item),
+    activeItem: props(styles.resultList.activeItem),
+    disabledItem: props(styles.resultList.disabledItem),
+    leading: props(styles.resultList.leading),
+    content: props(styles.resultList.content),
+    label: props($body.large, styles.resultList.label),
+    supportingText: props($body.medium, styles.resultList.supportingText),
+    trailing: props(styles.resultList.trailing)
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    role: "listbox",
+    className: stringify(classNames.searchResultList, styled.root.className),
+    style: _objectSpread(_objectSpread({}, styled.root.style), themeColorVars)
+  }, items.map(function (item) {
+    var isActive = !isUndefined(activeKey) && item.key === activeKey;
+    var itemContent = isFunction(renderItem) ? renderItem(item) : undefined;
+    var hasLeading = !!item.leading;
+    var hasSupportingText = !!item.supportingText;
+    var hasTrailing = !!item.trailing;
+    var itemStyles = props(styles.resultList.item, isActive && styles.resultList.activeItem, item.disabled && styles.resultList.disabledItem);
+    return /*#__PURE__*/React.createElement("div", _objectSpread({
+      key: getOptionId(item.key),
+      id: getOptionId(item.key),
+      role: "option",
+      "aria-selected": isActive,
+      "aria-disabled": item.disabled || undefined,
+      className: stringify(classNames.searchResultItem, _defineProperty(_defineProperty({}, classNames.searchResultItemActive, isActive), classNames.searchResultItemDisabled, !!item.disabled), itemStyles.className),
+      style: itemStyles.style
+    }, !item.disabled && {
+      onClick: function onClick() {
+        onActiveKeyChange(item.key);
+        onSelect(item);
+      }
+    }), isFunction(renderItem) ? itemContent : (/*#__PURE__*/React.createElement(React.Fragment, null, hasLeading && (/*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchResultItemLeading, styled.leading.className),
+      style: styled.leading.style
+    }, item.leading)), /*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchResultItemContent, styled.content.className),
+      style: styled.content.style
+    }, /*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchResultItemLabel, styled.label.className),
+      style: styled.label.style
+    }, item.label), hasSupportingText && (/*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchResultItemSupportingText, styled.supportingText.className),
+      style: styled.supportingText.style
+    }, item.supportingText))), hasTrailing && (/*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchResultItemTrailing, styled.trailing.className),
+      style: styled.trailing.style
+    }, item.trailing)))));
+  }));
+};
+
+export { SearchResultList as default };