musae 1.0.27-beta.40 → 1.0.27-beta.42

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.d.ts

@@ -0,0 +1,3 @@
+import ActionSheet from "./action-sheet";
+import { useActionSheet } from "./use-action-sheet";
+export { ActionSheet, useActionSheet };

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _regenerator = require('@babel/runtime/helpers/regenerator');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+var actionSheet = require('./action-sheet.cjs');
+
+/**
+ * @zh useActionSheet hook。返回 show 函数和 holder 元素。
+ * 需要在组件树中渲染 holder，然后通过 show 函数调用。
+ * @en useActionSheet hook. Returns a show function and a holder element.
+ * Render the holder in the component tree, then call via the show function.
+ */
+var useActionSheet = function useActionSheet() {
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    config = _useState2[0],
+    setConfig = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var handleClose = React.useCallback(function () {
+    setOpen(false);
+  }, []);
+  var show = relax.useEvent(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(nextConfig) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setConfig(nextConfig);
+            setOpen(true);
+          case 1:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  var trigger = React.useMemo(function () {
+    return {
+      show: show
+    };
+  }, [show]);
+  var holder = React.useMemo(function () {
+    if (!config) return null;
+    return /*#__PURE__*/React.createElement(actionSheet.default, _objectSpread({
+      open: open,
+      onClose: handleClose
+    }, config));
+  }, [config, open, handleClose]);
+  return [trigger, holder];
+};
+
+exports.useActionSheet = useActionSheet;

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { ActionSheetTrigger } from "../../types/action-sheet";
+/**
+ * @zh useActionSheet hook。返回 show 函数和 holder 元素。
+ * 需要在组件树中渲染 holder，然后通过 show 函数调用。
+ * @en useActionSheet hook. Returns a show function and a holder element.
+ * Render the holder in the component tree, then call via the show function.
+ */
+export declare const useActionSheet: () => [ActionSheetTrigger, ReactNode];

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

@@ -0,0 +1,58 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _regenerator from '@babel/runtime/helpers/regenerator';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { useState, useCallback, useMemo } from 'react';
+import { useEvent } from '@aiszlab/relax';
+import ActionSheet from './action-sheet.mjs';
+
+/**
+ * @zh useActionSheet hook。返回 show 函数和 holder 元素。
+ * 需要在组件树中渲染 holder，然后通过 show 函数调用。
+ * @en useActionSheet hook. Returns a show function and a holder element.
+ * Render the holder in the component tree, then call via the show function.
+ */
+var useActionSheet = function useActionSheet() {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    config = _useState2[0],
+    setConfig = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var handleClose = useCallback(function () {
+    setOpen(false);
+  }, []);
+  var show = useEvent(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(nextConfig) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setConfig(nextConfig);
+            setOpen(true);
+          case 1:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  var trigger = useMemo(function () {
+    return {
+      show: show
+    };
+  }, [show]);
+  var holder = useMemo(function () {
+    if (!config) return null;
+    return /*#__PURE__*/React.createElement(ActionSheet, _objectSpread({
+      open: open,
+      onClose: handleClose
+    }, config));
+  }, [config, open, handleClose]);
+  return [trigger, holder];
+};
+
+export { useActionSheet };

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/notification/holder.cjs

@@ -102,12 +102,11 @@ var Holder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return next;
     });
   });
-  React.useEffect(function () {
+  relax.useMounted(function () {
     defaultNotifications === null || defaultNotifications === void 0 || defaultNotifications.forEach(function (notification) {
       add(notification);
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  });
   React.useImperativeHandle(ref, function () {
     return {
       add: add

package/dist/components/notification/holder.mjs

@@ -1,12 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Portal from '../portal/portal.mjs';
 import { AnimatePresence } from 'motion/react';
 import Notification from './notification.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.18.3/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useIdentity, useEvent } from '@aiszlab/relax';
+import { useIdentity, useEvent, useMounted } from '@aiszlab/relax';
 
 var _excluded = ["placement", "key"],
   _excluded2 = ["description"];
@@ -98,12 +98,11 @@ var Holder = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return next;
     });
   });
-  useEffect(function () {
+  useMounted(function () {
     defaultNotifications === null || defaultNotifications === void 0 || defaultNotifications.forEach(function (notification) {
       add(notification);
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  });
   useImperativeHandle(ref, function () {
     return {
       add: add

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

@@ -9,6 +9,7 @@ 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 actionSheet = require('./components/action-sheet/action-sheet.cjs');
 var badge = require('./components/badge/badge.cjs');
 var bench = require('./components/bench/bench.cjs');
 var bottomSheet = require('./components/bottom-sheet/bottom-sheet.cjs');
@@ -71,6 +72,7 @@ var visuallyHidden = require('./components/visually-hidden/visually-hidden.cjs')
 var waterfall = require('./components/waterfall/waterfall.cjs');
 var watermark = require('./components/watermark/watermark.cjs');
 var highlight = require('./components/highlight/highlight.cjs');
+var useActionSheet = require('./components/action-sheet/use-action-sheet.cjs');
 var hooks = require('./components/message/hooks.cjs');
 var hooks$1 = require('./components/notification/hooks.cjs');
 var hooks$2 = require('./components/theme/hooks.cjs');
@@ -86,6 +88,7 @@ exports.Layout = index$5.Layout;
 exports.Image = index$4.Image;
 exports.RichTextEditor = index$8.RichTextEditor;
 exports.Markdown = index$6.Markdown;
+exports.ActionSheet = actionSheet.default;
 exports.Badge = badge.default;
 exports.Bench = bench.default;
 exports.BottomSheet = bottomSheet.default;
@@ -148,6 +151,7 @@ exports.VisuallyHidden = visuallyHidden.default;
 exports.Waterfall = waterfall.default;
 exports.Watermark = watermark.default;
 exports.Highlight = highlight.default;
+exports.useActionSheet = useActionSheet.useActionSheet;
 exports.useMessage = hooks.useMessage;
 exports.useNotification = hooks$1.useNotification;
 exports.useTheme = hooks$2.useTheme;

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";
@@ -76,4 +77,5 @@ export { Search } from "./components/search";
  */
 export { useMessage, Message } from "./components/message";
 export { useNotification, Notification } from "./components/notification";
+export { useActionSheet } from "./components/action-sheet";
 export { useTheme } from "./components/theme";

package/dist/index.mjs

@@ -7,6 +7,7 @@ export { Layout } from './components/layout/index.mjs';
 export { Image } from './components/image/index.mjs';
 export { RichTextEditor } from './components/rich-text-editor/index.mjs';
 export { Markdown } from './components/markdown/index.mjs';
+export { default as ActionSheet } from './components/action-sheet/action-sheet.mjs';
 export { default as Badge } from './components/badge/badge.mjs';
 export { default as Bench } from './components/bench/bench.mjs';
 export { default as BottomSheet } from './components/bottom-sheet/bottom-sheet.mjs';
@@ -69,6 +70,7 @@ export { default as VisuallyHidden } from './components/visually-hidden/visually
 export { default as Waterfall } from './components/waterfall/waterfall.mjs';
 export { default as Watermark } from './components/watermark/watermark.mjs';
 export { default as Highlight } from './components/highlight/highlight.mjs';
+export { useActionSheet } from './components/action-sheet/use-action-sheet.mjs';
 export { useMessage } from './components/message/hooks.mjs';
 export { useNotification } from './components/notification/hooks.mjs';
 export { useTheme } from './components/theme/hooks.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,85 @@
+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">;
+/**
+ * @zh `useActionSheet` hook 返回的 show 函数类型。
+ * @en The type of the show function returned by `useActionSheet` hook.
+ */
+export type ActionSheetTrigger = {
+    /**
+     * @zh 显示 ActionSheet，返回 Promise 在面板关闭后 resolve。
+     * @en Show the ActionSheet, returns a Promise that resolves after the panel closes.
+     */
+    show: (config: ActionSheetShowConfig) => Promise<void>;
+};

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.42",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",