musae 1.0.27-beta.4 → 1.0.27-beta.41

package/dist/components/action-sheet/__test__/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/action-sheet/action-sheet.cjs

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.18.3/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var className = require('@aiszlab/relax/class-name');
+var relax = require('@aiszlab/relax');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var sheet = require('../sheet/sheet.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var theme = require('../theme/theme.cjs');
+var context = require('./context.cjs');
+
+/**
+ * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
+ * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
+ */
+var styles = {
+  title: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  description: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actionText: {
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actionDesc: {
+    k9WMMc: "musaex-2b8uid",
+    keoZOQ: "musaex-1khtc51",
+    $$css: true
+  },
+  cancel: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    kkrTdU: "musaex-1ypdohk",
+    kAzted: "musaex-qi4gqz",
+    kEafiO: "musaex-2k45e9",
+    kPef9Z: "musaex-13fuv20",
+    kVAM5u: "musaex-axmpxa",
+    keoZOQ: "musaex-1eodh35",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  }
+};
+/**
+ * @zh ActionSheet 组件。基于 Sheet 的移动端底部操作面板，
+ * 支持操作列表和二次确认场景，同时提供声明式和指令式 API。
+ * @en ActionSheet component. A mobile bottom action panel built on Sheet,
+ * supporting action lists and confirmation scenarios, with both declarative and imperative APIs.
+ */
+var ActionSheet = function ActionSheet(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    actions = _ref.actions,
+    title = _ref.title,
+    description = _ref.description,
+    cancelText = _ref.cancelText,
+    height = _ref.height,
+    className$1 = _ref.className,
+    style = _ref.style;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var _useLocale = useLocale.useLocale("action-sheet"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["on-surface-variant", "surface-container", "outline-variant"]);
+  var styled = {
+    handle: {
+      className: "musaex-1po6ib musaex-rntz3j musaex-1xa9b2s musaex-9ip8r5 musaex-1eodh35 musaex-19i5tse musaex-vueqy4 musaex-2lah0s"
+    },
+    panel: {
+      className: "musaex-17o6occ musaex-zbxit7 musaex-1ei9pc5 musaex-15q9lfd"
+    },
+    header: {
+      className: "musaex-1b38e8b musaex-7gss4w"
+    },
+    title: stylex.props(styles.title, theme.$title.medium),
+    description: stylex.props(styles.description, theme.$body.medium),
+    actions: {
+      className: "musaex-ltmd5o"
+    },
+    action: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-6s0dn4 musaex-l56j7k musaex-1aur8i7 musaex-1v4gb6w musaex-1ypdohk musaex-qi4gqz musaex-uvson1 musaex-13fuv20 musaex-axmpxa musaex-87ps6o"
+    },
+    actionText: stylex.props(styles.actionText, theme.$body.large),
+    actionDesc: stylex.props(styles.actionDesc, theme.$body.small),
+    cancel: stylex.props(styles.cancel, theme.$label.large)
+  };
+  /**
+   * @zh 处理操作项点击：先执行回调，再关闭面板。
+   * @en Handle action click: execute callback first, then close the panel.
+   */
+  var handleAction = relax.useEvent(function (action) {
+    try {
+      var _action$onClick;
+      (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+    } catch (_unused) {
+      // noop — close the panel regardless of onClick result
+    } finally {
+      onClose();
+    }
+  });
+  /**
+   * @zh 头部区域：拖拽手柄 + 标题 + 描述。
+   * @en Header area: drag handle + title + description.
+   */
+  var header = /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.header, styled.header.className),
+    style: styled.header.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(styled.handle.className),
+    style: _objectSpread(_objectSpread({}, styled.handle.style), themeColorVars)
+  }), !!title && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.title, styled.title.className),
+    style: styled.title.style
+  }, title)), !!description && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.description, styled.description.className),
+    style: styled.description.style
+  }, description)));
+  return /*#__PURE__*/React.createElement(sheet.default, {
+    visible: open,
+    placement: "bottom",
+    size: height !== null && height !== void 0 ? height : "fit-content",
+    onClose: onClose,
+    header: header,
+    className: className.stringify(classNames.sheet, className$1),
+    panelClassName: styled.panel.className,
+    panelStyle: _objectSpread(_objectSpread(_objectSpread({}, styled.panel.style), themeColorVars), style)
+  }, actions.length > 0 && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.actions, styled.actions.className),
+    style: styled.actions.style
+  }, actions.map(function (action) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: action.key,
+      className: className.stringify(classNames.action, styled.action.className),
+      style: styled.action.style,
+      onClick: function onClick() {
+        return handleAction(action);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.actionText, styled.actionText.className),
+      style: styled.actionText.style
+    }, action.text), !!action.description && (/*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.actionDesc, styled.actionDesc.className),
+      style: styled.actionDesc.style
+    }, action.description)));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.cancel, styled.cancel.className),
+    style: styled.cancel.style,
+    onClick: onClose
+  }, cancelText !== null && cancelText !== void 0 ? cancelText : locale.cancel));
+};
+
+exports.default = ActionSheet;

package/dist/components/action-sheet/action-sheet.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ActionSheetProps } from "../../types/action-sheet";
+/**
+ * @zh ActionSheet 组件。基于 Sheet 的移动端底部操作面板，
+ * 支持操作列表和二次确认场景，同时提供声明式和指令式 API。
+ * @en ActionSheet component. A mobile bottom action panel built on Sheet,
+ * supporting action lists and confirmation scenarios, with both declarative and imperative APIs.
+ */
+declare const ActionSheet: ({ open, onClose, actions, title, description, cancelText, height, className, style, }: ActionSheetProps) => React.JSX.Element;
+export default ActionSheet;

package/dist/components/action-sheet/action-sheet.mjs

@@ -0,0 +1,164 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.18.3/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { stringify } from '@aiszlab/relax/class-name';
+import { useEvent } from '@aiszlab/relax';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import Sheet from '../sheet/sheet.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { $label, $body, $title } from '../theme/theme.mjs';
+import { CLASS_NAMES } from './context.mjs';
+
+/**
+ * @zh ActionSheet 专用样式：面板背景、拖拽手柄、操作项和取消按钮的样式。
+ * @en ActionSheet-specific styles: panel background, drag handle, action items and cancel button.
+ */
+var styles = {
+  title: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  description: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-3nylsr",
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actionText: {
+    k9WMMc: "musaex-2b8uid",
+    $$css: true
+  },
+  actionDesc: {
+    k9WMMc: "musaex-2b8uid",
+    keoZOQ: "musaex-1khtc51",
+    $$css: true
+  },
+  cancel: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kjj79g: "musaex-l56j7k",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    kkrTdU: "musaex-1ypdohk",
+    kAzted: "musaex-qi4gqz",
+    kEafiO: "musaex-2k45e9",
+    kPef9Z: "musaex-13fuv20",
+    kVAM5u: "musaex-axmpxa",
+    keoZOQ: "musaex-1eodh35",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  }
+};
+/**
+ * @zh ActionSheet 组件。基于 Sheet 的移动端底部操作面板，
+ * 支持操作列表和二次确认场景，同时提供声明式和指令式 API。
+ * @en ActionSheet component. A mobile bottom action panel built on Sheet,
+ * supporting action lists and confirmation scenarios, with both declarative and imperative APIs.
+ */
+var ActionSheet = function ActionSheet(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    actions = _ref.actions,
+    title = _ref.title,
+    description = _ref.description,
+    cancelText = _ref.cancelText,
+    height = _ref.height,
+    className = _ref.className,
+    style = _ref.style;
+  var classNames = useClassNames(CLASS_NAMES);
+  var _useLocale = useLocale("action-sheet"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var themeColorVars = useThemeColorVars(["on-surface-variant", "surface-container", "outline-variant"]);
+  var styled = {
+    handle: {
+      className: "musaex-1po6ib musaex-rntz3j musaex-1xa9b2s musaex-9ip8r5 musaex-1eodh35 musaex-19i5tse musaex-vueqy4 musaex-2lah0s"
+    },
+    panel: {
+      className: "musaex-17o6occ musaex-zbxit7 musaex-1ei9pc5 musaex-15q9lfd"
+    },
+    header: {
+      className: "musaex-1b38e8b musaex-7gss4w"
+    },
+    title: props(styles.title, $title.medium),
+    description: props(styles.description, $body.medium),
+    actions: {
+      className: "musaex-ltmd5o"
+    },
+    action: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-6s0dn4 musaex-l56j7k musaex-1aur8i7 musaex-1v4gb6w musaex-1ypdohk musaex-qi4gqz musaex-uvson1 musaex-13fuv20 musaex-axmpxa musaex-87ps6o"
+    },
+    actionText: props(styles.actionText, $body.large),
+    actionDesc: props(styles.actionDesc, $body.small),
+    cancel: props(styles.cancel, $label.large)
+  };
+  /**
+   * @zh 处理操作项点击：先执行回调，再关闭面板。
+   * @en Handle action click: execute callback first, then close the panel.
+   */
+  var handleAction = useEvent(function (action) {
+    try {
+      var _action$onClick;
+      (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+    } catch (_unused) {
+      // noop — close the panel regardless of onClick result
+    } finally {
+      onClose();
+    }
+  });
+  /**
+   * @zh 头部区域：拖拽手柄 + 标题 + 描述。
+   * @en Header area: drag handle + title + description.
+   */
+  var header = /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.header, styled.header.className),
+    style: styled.header.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stringify(styled.handle.className),
+    style: _objectSpread(_objectSpread({}, styled.handle.style), themeColorVars)
+  }), !!title && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.title, styled.title.className),
+    style: styled.title.style
+  }, title)), !!description && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.description, styled.description.className),
+    style: styled.description.style
+  }, description)));
+  return /*#__PURE__*/React.createElement(Sheet, {
+    visible: open,
+    placement: "bottom",
+    size: height !== null && height !== void 0 ? height : "fit-content",
+    onClose: onClose,
+    header: header,
+    className: stringify(classNames.sheet, className),
+    panelClassName: styled.panel.className,
+    panelStyle: _objectSpread(_objectSpread(_objectSpread({}, styled.panel.style), themeColorVars), style)
+  }, actions.length > 0 && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.actions, styled.actions.className),
+    style: styled.actions.style
+  }, actions.map(function (action) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: action.key,
+      className: stringify(classNames.action, styled.action.className),
+      style: styled.action.style,
+      onClick: function onClick() {
+        return handleAction(action);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.actionText, styled.actionText.className),
+      style: styled.actionText.style
+    }, action.text), !!action.description && (/*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.actionDesc, styled.actionDesc.className),
+      style: styled.actionDesc.style
+    }, action.description)));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.cancel, styled.cancel.className),
+    style: styled.cancel.style,
+    onClick: onClose
+  }, cancelText !== null && cancelText !== void 0 ? cancelText : locale.cancel));
+};
+
+export { ActionSheet as default };

package/dist/components/action-sheet/context.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @zh ActionSheet 的 BEM class 名称
+ * @en BEM class names for ActionSheet
+ */
+var CLASS_NAMES = {
+  sheet: "action-sheet",
+  header: "action-sheet__header",
+  title: "action-sheet__title",
+  description: "action-sheet__description",
+  actions: "action-sheet__actions",
+  action: "action-sheet__action",
+  actionText: "action-sheet__action-text",
+  actionDesc: "action-sheet__action-desc",
+  cancel: "action-sheet__cancel"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

package/dist/components/action-sheet/context.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @zh ActionSheet 的 BEM class 名称
+ * @en BEM class names for ActionSheet
+ */
+export declare const CLASS_NAMES: {
+    readonly sheet: "action-sheet";
+    readonly header: "action-sheet__header";
+    readonly title: "action-sheet__title";
+    readonly description: "action-sheet__description";
+    readonly actions: "action-sheet__actions";
+    readonly action: "action-sheet__action";
+    readonly actionText: "action-sheet__action-text";
+    readonly actionDesc: "action-sheet__action-desc";
+    readonly cancel: "action-sheet__cancel";
+};

package/dist/components/action-sheet/context.mjs

@@ -0,0 +1,17 @@
+/**
+ * @zh ActionSheet 的 BEM class 名称
+ * @en BEM class names for ActionSheet
+ */
+var CLASS_NAMES = {
+  sheet: "action-sheet",
+  header: "action-sheet__header",
+  title: "action-sheet__title",
+  description: "action-sheet__description",
+  actions: "action-sheet__actions",
+  action: "action-sheet__action",
+  actionText: "action-sheet__action-text",
+  actionDesc: "action-sheet__action-desc",
+  cancel: "action-sheet__cancel"
+};
+
+export { CLASS_NAMES };

package/dist/components/action-sheet/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var actionSheet = require('./action-sheet.cjs');
+var notifier = require('./notifier.cjs');
+
+var ActionSheetWithApi = Object.assign(actionSheet.default, notifier.default);
+
+exports.ActionSheet = ActionSheetWithApi;

package/dist/components/action-sheet/index.d.ts

@@ -0,0 +1,4 @@
+declare const ActionSheetWithApi: (({ open, onClose, actions, title, description, cancelText, height, className, style, }: import("../../types/action-sheet").ActionSheetProps) => import("react").JSX.Element) & {
+    show: (config: import("../../types/action-sheet").ActionSheetShowConfig) => Promise<void>;
+};
+export { ActionSheetWithApi as ActionSheet };

package/dist/components/action-sheet/index.mjs

@@ -0,0 +1,6 @@
+import ActionSheet from './action-sheet.mjs';
+import ActionSheetApi from './notifier.mjs';
+
+var ActionSheetWithApi = Object.assign(ActionSheet, ActionSheetApi);
+
+export { ActionSheetWithApi as ActionSheet };

package/dist/components/action-sheet/notifier.cjs

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _classPrivateMethodInitSpec = require('@babel/runtime/helpers/classPrivateMethodInitSpec');
+var _classPrivateFieldInitSpec = require('@babel/runtime/helpers/classPrivateFieldInitSpec');
+var _assertClassBrand = require('@babel/runtime/helpers/assertClassBrand');
+var _classPrivateFieldSet = require('@babel/runtime/helpers/classPrivateFieldSet2');
+var _classPrivateFieldGet = require('@babel/runtime/helpers/classPrivateFieldGet2');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var client = require('react-dom/client');
+var actionSheet = require('./action-sheet.cjs');
+
+/**
+ * @zh 指令式 API 的内部 Holder 组件。
+ * 管理 open 状态，在退出动画完成后清理 root 并 resolve Promise。
+ * @en Internal Holder component for the imperative API.
+ * Manages open state, cleans up root and resolves Promise after exit animation.
+ */
+var ActionSheetHolder = function ActionSheetHolder(_ref) {
+  var config = _ref.config,
+    onResolve = _ref.onResolve;
+  var _useState = React.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  /**
+   * @zh 关闭面板：设置 open=false 触发退出动画，
+   * 等待动画完成后调用 onResolve 清理 root。
+   * @en Close the panel: set open=false to trigger exit animation,
+   * wait for animation to complete then call onResolve to cleanup root.
+   */
+  var handleClose = React.useCallback(function () {
+    setOpen(false);
+    setTimeout(function () {
+      onResolve();
+    }, 350);
+  }, [onResolve]);
+  return /*#__PURE__*/React.createElement(actionSheet.default, _objectSpread({
+    open: open,
+    onClose: handleClose
+  }, config));
+};
+/**
+ * @zh ActionSheet 指令式 API 的 Notifier 单例。
+ * 每次调用 show() 创建新的 React root，返回在面板关闭后 resolve 的 Promise。
+ * 如果重复调用 show()，会先清理旧面板（旧 Promise 立即 resolve）。
+ * @en Notifier singleton for the ActionSheet imperative API.
+ * Each show() call creates a new React root and returns a Promise that resolves after panel closes.
+ * If show() is called again while a panel is open, the old panel is cleaned up (old Promise resolves immediately).
+ */
+var _root = /*#__PURE__*/new WeakMap();
+var _cleanup = /*#__PURE__*/new WeakMap();
+var _ActionSheetNotifier_brand = /*#__PURE__*/new WeakSet();
+var ActionSheetNotifier = /*#__PURE__*/function () {
+  function ActionSheetNotifier() {
+    _classCallCheck(this, ActionSheetNotifier);
+    /**
+     * @zh 清理当前面板（如果有）。
+     * @en Clean up the current panel if exists.
+     */
+    _classPrivateMethodInitSpec(this, _ActionSheetNotifier_brand);
+    _classPrivateFieldInitSpec(this, _root, null);
+    _classPrivateFieldInitSpec(this, _cleanup, null);
+    if (_instance._) {
+      return _instance._;
+    }
+    _instance._ = this;
+  }
+  return _createClass(ActionSheetNotifier, [{
+    key: "show",
+    value:
+    /**
+     * @zh 显示 ActionSheet。返回的 Promise 在面板关闭动画完成后 resolve。
+     * 如果当前已有面板显示，会先清理旧面板再显示新的。
+     * @en Show the ActionSheet. Returns a Promise that resolves after the close animation completes.
+     * If a panel is already showing, it will be cleaned up before showing the new one.
+     */
+    function show(config) {
+      var _this = this;
+      _assertClassBrand(_ActionSheetNotifier_brand, this, _disposeCurrent).call(this);
+      return new Promise(function (resolve) {
+        var fragment = document.createDocumentFragment();
+        var root = client.createRoot(fragment);
+        _classPrivateFieldSet(_root, _this, root);
+        var cleanup = function cleanup() {
+          _classPrivateFieldSet(_root, _this, null);
+          _classPrivateFieldSet(_cleanup, _this, null);
+          root.unmount();
+          resolve();
+        };
+        _classPrivateFieldSet(_cleanup, _this, function () {
+          _classPrivateFieldSet(_root, _this, null);
+          _classPrivateFieldSet(_cleanup, _this, null);
+          root.unmount();
+          resolve();
+        });
+        root.render(/*#__PURE__*/React.createElement(ActionSheetHolder, {
+          config: config,
+          onResolve: cleanup
+        }));
+      });
+    }
+  }]);
+}();
+function _disposeCurrent() {
+  if (_classPrivateFieldGet(_cleanup, this)) {
+    _classPrivateFieldGet(_cleanup, this).call(this);
+    _classPrivateFieldSet(_cleanup, this, null);
+  }
+  if (_classPrivateFieldGet(_root, this)) {
+    _classPrivateFieldGet(_root, this).unmount();
+    _classPrivateFieldSet(_root, this, null);
+  }
+}
+var _instance = {
+  _: null
+};
+var notifier = new ActionSheetNotifier();
+/**
+ * @zh ActionSheet 的指令式 API。
+ * 调用 `ActionSheet.show(config)` 显示操作面板，返回 Promise。
+ * @en ActionSheet imperative API.
+ * Call `ActionSheet.show(config)` to display the action panel, returns a Promise.
+ */
+var ActionSheetApi = {
+  /**
+   * @zh 显示 ActionSheet 操作面板。
+   * 返回 Promise，在面板关闭动画完成后 resolve。
+   * @en Show the ActionSheet panel.
+   * Returns a Promise that resolves after the close animation completes.
+   */
+  show: function show(config) {
+    return notifier.show(config);
+  }
+};
+
+exports.default = ActionSheetApi;

package/dist/components/action-sheet/notifier.d.ts

@@ -0,0 +1,17 @@
+import type { ActionSheetShowConfig } from "../../types/action-sheet";
+/**
+ * @zh ActionSheet 的指令式 API。
+ * 调用 `ActionSheet.show(config)` 显示操作面板，返回 Promise。
+ * @en ActionSheet imperative API.
+ * Call `ActionSheet.show(config)` to display the action panel, returns a Promise.
+ */
+declare const ActionSheetApi: {
+    /**
+     * @zh 显示 ActionSheet 操作面板。
+     * 返回 Promise，在面板关闭动画完成后 resolve。
+     * @en Show the ActionSheet panel.
+     * Returns a Promise that resolves after the close animation completes.
+     */
+    show: (config: ActionSheetShowConfig) => Promise<void>;
+};
+export default ActionSheetApi;