musae 1.0.27-beta.40 → 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;

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

@@ -0,0 +1,138 @@
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _classPrivateMethodInitSpec from '@babel/runtime/helpers/classPrivateMethodInitSpec';
+import _classPrivateFieldInitSpec from '@babel/runtime/helpers/classPrivateFieldInitSpec';
+import _assertClassBrand from '@babel/runtime/helpers/assertClassBrand';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet2';
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet2';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { useState, useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+import ActionSheet from './action-sheet.mjs';
+
+/**
+ * @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 = 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 = useCallback(function () {
+    setOpen(false);
+    setTimeout(function () {
+      onResolve();
+    }, 350);
+  }, [onResolve]);
+  return /*#__PURE__*/React.createElement(ActionSheet, _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 = 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);
+  }
+};
+
+export { ActionSheetApi as default };

package/dist/components/button/styles.d.ts

@@ -58,6 +58,9 @@ declare const styles: {
     }>;
     shape: {
         round: Readonly<{
+            xsmall?: Readonly<{
+                borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            } | undefined>;
             small?: Readonly<{
                 borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             } | undefined>;
@@ -67,14 +70,14 @@ declare const styles: {
             large?: Readonly<{
                 borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             } | undefined>;
-            xsmall?: Readonly<{
-                borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
-            } | undefined>;
             xlarge?: Readonly<{
                 borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             } | undefined>;
         }>;
         square: Readonly<{
+            xsmall?: Readonly<{
+                borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            } | undefined>;
             small?: Readonly<{
                 borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             } | undefined>;
@@ -84,9 +87,6 @@ declare const styles: {
             large?: Readonly<{
                 borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             } | undefined>;
-            xsmall?: Readonly<{
-                borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
-            } | undefined>;
             xlarge?: Readonly<{
                 borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             } | undefined>;

package/dist/components/fab/fab.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const Fab: React.ForwardRefExoticComponent<Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave"> & {
+declare const Fab: React.ForwardRefExoticComponent<Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "onPointerEnter" | "onPointerLeave" | "onMouseEnter" | "onMouseLeave"> & {
     container?: import("../../types/portal").PortalProps["container"];
     children?: React.ReactNode;
     onClick?: import("../../types/button").ButtonProps["onClick"];

package/dist/components/image/image.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ImageRef } from "../../types/image";
-declare const Image: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<React.ImgHTMLAttributes<HTMLImageElement>, "alt" | "width" | "height" | "crossOrigin" | "referrerPolicy"> & {
+declare const Image: React.ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<React.ImgHTMLAttributes<HTMLImageElement>, "height" | "width" | "alt" | "crossOrigin" | "referrerPolicy"> & {
     src?: string;
     previewable?: boolean;
     fallback?: React.ReactNode;

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

@@ -1,4 +1,4 @@
-declare const Image: import("react").ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<import("react").ImgHTMLAttributes<HTMLImageElement>, "alt" | "width" | "height" | "crossOrigin" | "referrerPolicy"> & {
+declare const Image: import("react").ForwardRefExoticComponent<import("../../types/element").ComponentProps & Pick<import("react").ImgHTMLAttributes<HTMLImageElement>, "height" | "width" | "alt" | "crossOrigin" | "referrerPolicy"> & {
     src?: string;
     previewable?: boolean;
     fallback?: import("react").ReactNode;

package/dist/components/popper/dropdown.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { PopperRef } from "../../types/popper";
-declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("../../types/popper").PopperProps, "container" | "placement" | "portal"> & {
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("../../types/popper").PopperProps, "placement" | "container" | "portal"> & {
     placement: import("@floating-ui/dom").Placement;
 } & React.RefAttributes<PopperRef>>;
 export default Dropdown;

package/dist/components/select/selector.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { SelectorRef } from "../../types/select";
-declare const Selector: React.ForwardRefExoticComponent<Pick<import("@aiszlab/relax/types").RequiredIn<import("../../types/select").SelectProps<import("../../types/select").ValueOrValues>, "searchable" | "onSearch">, "onBlur" | "mode" | "disabled" | "placeholder" | "searchable" | "onSearch"> & {
+declare const Selector: React.ForwardRefExoticComponent<Pick<import("@aiszlab/relax/types").RequiredIn<import("../../types/select").SelectProps<import("../../types/select").ValueOrValues>, "searchable" | "onSearch">, "disabled" | "onBlur" | "mode" | "placeholder" | "searchable" | "onSearch"> & {
     value: Map<React.Key, React.ReactNode>;
     keyword: string;
     onChange: (key: React.Key) => void;

package/dist/components/theme/tokens.stylex.d.ts

@@ -4,11 +4,11 @@ import { ValueOf } from "@aiszlab/relax/types";
  * elevations
  */
 export declare const elevations: import("@stylexjs/stylex").VarGroup<Readonly<{
+    none: string;
+    xsmall: string;
     small: string;
     medium: string;
     large: string;
-    none: string;
-    xsmall: string;
     xlarge: string;
 }>, symbol>;
 /**

package/dist/index.cjs

@@ -1,14 +1,15 @@
 'use strict';
 
-var index = require('./components/avatar/index.cjs');
-var index$7 = require('./components/radio/index.cjs');
-var index$1 = require('./components/checkbox/index.cjs');
-var index$3 = require('./components/grid/index.cjs');
-var index$2 = require('./components/form/index.cjs');
-var index$5 = require('./components/layout/index.cjs');
-var index$4 = require('./components/image/index.cjs');
-var index$8 = require('./components/rich-text-editor/index.cjs');
-var index$6 = require('./components/markdown/index.cjs');
+var index = require('./components/action-sheet/index.cjs');
+var index$1 = require('./components/avatar/index.cjs');
+var index$8 = require('./components/radio/index.cjs');
+var index$2 = require('./components/checkbox/index.cjs');
+var index$4 = require('./components/grid/index.cjs');
+var index$3 = require('./components/form/index.cjs');
+var index$6 = require('./components/layout/index.cjs');
+var index$5 = require('./components/image/index.cjs');
+var index$9 = require('./components/rich-text-editor/index.cjs');
+var index$7 = require('./components/markdown/index.cjs');
 var badge = require('./components/badge/badge.cjs');
 var bench = require('./components/bench/bench.cjs');
 var bottomSheet = require('./components/bottom-sheet/bottom-sheet.cjs');
@@ -77,15 +78,16 @@ var hooks$2 = require('./components/theme/hooks.cjs');
 
 
 
-exports.Avatar = index.Avatar;
-exports.Radio = index$7.Radio;
-exports.Checkbox = index$1.Checkbox;
-exports.Grid = index$3.Grid;
-exports.Form = index$2.Form;
-exports.Layout = index$5.Layout;
-exports.Image = index$4.Image;
-exports.RichTextEditor = index$8.RichTextEditor;
-exports.Markdown = index$6.Markdown;
+exports.ActionSheet = index.ActionSheet;
+exports.Avatar = index$1.Avatar;
+exports.Radio = index$8.Radio;
+exports.Checkbox = index$2.Checkbox;
+exports.Grid = index$4.Grid;
+exports.Form = index$3.Form;
+exports.Layout = index$6.Layout;
+exports.Image = index$5.Image;
+exports.RichTextEditor = index$9.RichTextEditor;
+exports.Markdown = index$7.Markdown;
 exports.Badge = badge.default;
 exports.Bench = bench.default;
 exports.BottomSheet = bottomSheet.default;

package/dist/index.d.ts

@@ -2,6 +2,7 @@
  * @description
  * components
  */
+export { ActionSheet } from "./components/action-sheet";
 export { Avatar } from "./components/avatar";
 export { Menu } from "./components/menu";
 export { Loading } from "./components/loading";

package/dist/index.mjs

@@ -1,3 +1,4 @@
+export { ActionSheet } from './components/action-sheet/index.mjs';
 export { Avatar } from './components/avatar/index.mjs';
 export { Radio } from './components/radio/index.mjs';
 export { Checkbox } from './components/checkbox/index.mjs';

package/dist/locale/locales/en_US.cjs

@@ -56,6 +56,9 @@ var en_US = {
   "rich-text-editor": {
     checkList: "Check List",
     codeBlock: "Code Block"
+  },
+  "action-sheet": {
+    cancel: "Cancel"
   }
 };
 

package/dist/locale/locales/en_US.mjs

@@ -52,6 +52,9 @@ var en_US = {
   "rich-text-editor": {
     checkList: "Check List",
     codeBlock: "Code Block"
+  },
+  "action-sheet": {
+    cancel: "Cancel"
   }
 };
 

package/dist/locale/locales/zh_CN.cjs

@@ -56,6 +56,9 @@ var zh_CN = {
   "rich-text-editor": {
     checkList: "任务列表",
     codeBlock: "代码块"
+  },
+  "action-sheet": {
+    cancel: "取消"
   }
 };
 

package/dist/locale/locales/zh_CN.mjs

@@ -52,6 +52,9 @@ var zh_CN = {
   "rich-text-editor": {
     checkList: "任务列表",
     codeBlock: "代码块"
+  },
+  "action-sheet": {
+    cancel: "取消"
   }
 };
 

package/dist/styles.css

@@ -1833,6 +1833,10 @@
     border-top-style: solid;
   }
 
+  .musaex-2k45e9 {
+    border-top-width: var(--musaex-1t2jekz);
+  }
+
   .musaex-uvson1 {
     border-top-width: var(--musaex-1xf102v);
   }
@@ -2101,6 +2105,10 @@
     min-height: var(--musaex-19fxx0u);
   }
 
+  .musaex-qi4gqz {
+    min-height: var(--musaex-1rxoe21);
+  }
+
   .musaex-5g0ifs {
     min-height: var(--musaex-1w5d7ii);
   }
@@ -2229,6 +2237,14 @@
     padding-top: var(--musaex-16suft8);
   }
 
+  .musaex-1b38e8b {
+    padding-top: var(--musaex-1fxazvh);
+  }
+
+  .musaex-3nylsr {
+    padding-top: var(--musaex-48i97p);
+  }
+
   .musaex-ltmd5o {
     padding-top: var(--musaex-jo49ah);
   }

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

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import type { ComponentProps } from "./element";
+/**
+ * @zh 操作项，用于 ActionSheet 的操作列表。
+ * @en An action item for the ActionSheet's action list.
+ */
+export interface ActionItem {
+    /**
+     * @zh 操作项唯一标识
+     * @en Unique identifier for the action item
+     */
+    key: string;
+    /**
+     * @zh 操作项显示文本
+     * @en Display text for the action item
+     */
+    text: ReactNode;
+    /**
+     * @zh 操作项描述文本（可选副标题），显示在 text 下方
+     * @en Optional description text displayed below the main text
+     */
+    description?: ReactNode;
+    /**
+     * @zh 点击操作项时的回调
+     * @en Callback when the action item is clicked
+     */
+    onClick?: () => void;
+}
+/**
+ * @zh ActionSheet 组件的属性。
+ * @en Props for the ActionSheet component.
+ */
+export interface ActionSheetProps extends ComponentProps {
+    /**
+     * @zh 控制 ActionSheet 的可见状态
+     * @en Controls the visibility state of the ActionSheet
+     */
+    open: boolean;
+    /**
+     * @zh 当 ActionSheet 请求关闭时的回调
+     * @en Called when the ActionSheet requests to close
+     */
+    onClose: VoidFunction;
+    /**
+     * @zh 操作项列表
+     * @en List of action items
+     */
+    actions: ActionItem[];
+    /**
+     * @zh 顶部标题（可选）
+     * @en Optional title displayed at the top
+     */
+    title?: ReactNode;
+    /**
+     * @zh 标题下方的描述文本（可选）
+     * @en Optional description text displayed below the title
+     */
+    description?: ReactNode;
+    /**
+     * @zh 取消按钮文本。默认使用 locale 中的 cancel 文案
+     * @en Cancel button text. Uses locale cancel text by default
+     */
+    cancelText?: ReactNode;
+    /**
+     * @zh 面板高度。接受数字（px）或任意 CSS 高度值
+     * @en Height of the panel. Accepts number (px) or any CSS height value
+     */
+    height?: number | string;
+}
+/**
+ * @zh 指令式 API `ActionSheet.show()` 的配置参数。
+ * @en Configuration for the imperative API `ActionSheet.show()`.
+ */
+export type ActionSheetShowConfig = Omit<ActionSheetProps, "open" | "onClose">;

package/dist/types/locale.d.ts

@@ -47,4 +47,7 @@ export interface Locale {
         checkList: string;
         codeBlock: string;
     };
+    "action-sheet": {
+        cancel: string;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.27-beta.40",
+  "version": "1.0.27-beta.41",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",