musae 1.0.27-beta.32 → 1.0.27-beta.34

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

@@ -3,43 +3,64 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var relax = require('@aiszlab/relax');
-var portal = require('../portal/portal.cjs');
-var sheet = require('./sheet.cjs');
+var sheet = require('../sheet/sheet.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('@aiszlab/relax/class-name');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var context = require('./context.cjs');
 
-var _excluded = ["open", "height", "closable"];
+var _excluded = ["open", "height", "closable", "modal"];
+/**
+ * @zh BottomSheet 专用样式：居中的拖拽手柄条，以及面板背景和圆角。
+ * @en BottomSheet-specific styles: a centered drag handle pill, and panel background/border-radius.
+ */
+
+/**
+ * @zh BottomSheet 组件。从底部滑入的模态面板，带有拖拽手柄指示器。
+ * 基于共享的 Sheet 基础组件构建。
+ * @en BottomSheet component. A modal panel that slides up from the bottom
+ * with a drag handle indicator. Built on the shared Sheet base component.
+ */
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? "50vh" : _ref$height,
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? true : _ref$modal,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Keep Portal mounted during exit animation
-  var _useBoolean = relax.useBoolean(false),
-    _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    isVisible = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    turnOn = _useBoolean2$.turnOn,
-    turnOff = _useBoolean2$.turnOff;
-  React.useEffect(function () {
-    if (open) {
-      turnOn();
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["on-surface-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"
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return /*#__PURE__*/React.createElement(portal.default, {
-    open: open || isVisible,
-    lockable: true
-  }, /*#__PURE__*/React.createElement(sheet.default, _objectSpread(_objectSpread({}, props), {}, {
-    open: open,
-    height: height,
+  };
+  /**
+   * @zh BottomSheet 专用头部：居中的拖拽手柄条。
+   * @en BottomSheet-specific header: a centered drag handle pill.
+   */
+  var header = /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.handle, styled.handle.className),
+    style: _objectSpread(_objectSpread({}, styled.handle.style), themeColorVars)
+  });
+  return /*#__PURE__*/React.createElement(sheet.default, {
+    visible: open,
+    placement: "bottom",
+    size: height,
     closable: closable,
-    onClosed: turnOff
-  })));
+    modal: modal,
+    onClose: props.onClose,
+    className: classNames.sheet,
+    header: header,
+    panelClassName: styled.panel.className
+  }, props.children);
 };
 
 exports.default = BottomSheet;

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

@@ -1,4 +1,10 @@
 import React from "react";
 import type { BottomSheetProps } from "../../types/bottom-sheet";
-declare const BottomSheet: ({ open, height, closable, ...props }: BottomSheetProps) => React.JSX.Element;
+/**
+ * @zh BottomSheet 组件。从底部滑入的模态面板，带有拖拽手柄指示器。
+ * 基于共享的 Sheet 基础组件构建。
+ * @en BottomSheet component. A modal panel that slides up from the bottom
+ * with a drag handle indicator. Built on the shared Sheet base component.
+ */
+declare const BottomSheet: ({ open, height, closable, modal, ...props }: BottomSheetProps) => React.JSX.Element;
 export default BottomSheet;

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

@@ -1,41 +1,62 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useEffect } from 'react';
-import { useBoolean } from '@aiszlab/relax';
-import Portal from '../portal/portal.mjs';
-import Sheet from './sheet.mjs';
+import React from 'react';
+import Sheet from '../sheet/sheet.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { stringify } from '@aiszlab/relax/class-name';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { CLASS_NAMES } from './context.mjs';
 
-var _excluded = ["open", "height", "closable"];
+var _excluded = ["open", "height", "closable", "modal"];
+/**
+ * @zh BottomSheet 专用样式：居中的拖拽手柄条，以及面板背景和圆角。
+ * @en BottomSheet-specific styles: a centered drag handle pill, and panel background/border-radius.
+ */
+
+/**
+ * @zh BottomSheet 组件。从底部滑入的模态面板，带有拖拽手柄指示器。
+ * 基于共享的 Sheet 基础组件构建。
+ * @en BottomSheet component. A modal panel that slides up from the bottom
+ * with a drag handle indicator. Built on the shared Sheet base component.
+ */
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? "50vh" : _ref$height,
     _ref$closable = _ref.closable,
     closable = _ref$closable === void 0 ? true : _ref$closable,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? true : _ref$modal,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Keep Portal mounted during exit animation
-  var _useBoolean = useBoolean(false),
-    _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    isVisible = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    turnOn = _useBoolean2$.turnOn,
-    turnOff = _useBoolean2$.turnOff;
-  useEffect(function () {
-    if (open) {
-      turnOn();
+  var classNames = useClassNames(CLASS_NAMES);
+  var themeColorVars = useThemeColorVars(["on-surface-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"
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return /*#__PURE__*/React.createElement(Portal, {
-    open: open || isVisible,
-    lockable: true
-  }, /*#__PURE__*/React.createElement(Sheet, _objectSpread(_objectSpread({}, props), {}, {
-    open: open,
-    height: height,
+  };
+  /**
+   * @zh BottomSheet 专用头部：居中的拖拽手柄条。
+   * @en BottomSheet-specific header: a centered drag handle pill.
+   */
+  var header = /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.handle, styled.handle.className),
+    style: _objectSpread(_objectSpread({}, styled.handle.style), themeColorVars)
+  });
+  return /*#__PURE__*/React.createElement(Sheet, {
+    visible: open,
+    placement: "bottom",
+    size: height,
     closable: closable,
-    onClosed: turnOff
-  })));
+    modal: modal,
+    onClose: props.onClose,
+    className: classNames.sheet,
+    header: header,
+    panelClassName: styled.panel.className
+  }, props.children);
 };
 
 export { BottomSheet as default };

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

@@ -1,15 +1,12 @@
 'use strict';
 
 /**
- * @description
- * class names for BottomSheet
+ * @zh BottomSheet 的 class 名称
+ * @en class names for BottomSheet
  */
 var CLASS_NAMES = {
   sheet: "bottom-sheet",
-  overlay: "bottom-sheet__overlay",
-  panel: "bottom-sheet__panel",
-  handle: "bottom-sheet__drag-handle",
-  body: "bottom-sheet__body"
+  handle: "bottom-sheet__drag-handle"
 };
 
 exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -1,11 +1,8 @@
 /**
- * @description
- * class names for BottomSheet
+ * @zh BottomSheet 的 class 名称
+ * @en class names for BottomSheet
  */
 export declare const CLASS_NAMES: {
     readonly sheet: "bottom-sheet";
-    readonly overlay: "bottom-sheet__overlay";
-    readonly panel: "bottom-sheet__panel";
     readonly handle: "bottom-sheet__drag-handle";
-    readonly body: "bottom-sheet__body";
 };

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

@@ -1,13 +1,10 @@
 /**
- * @description
- * class names for BottomSheet
+ * @zh BottomSheet 的 class 名称
+ * @en class names for BottomSheet
  */
 var CLASS_NAMES = {
   sheet: "bottom-sheet",
-  overlay: "bottom-sheet__overlay",
-  panel: "bottom-sheet__panel",
-  handle: "bottom-sheet__drag-handle",
-  body: "bottom-sheet__body"
+  handle: "bottom-sheet__drag-handle"
 };
 
 export { CLASS_NAMES };

package/dist/components/dialog/dialog.cjs

@@ -40,7 +40,7 @@ var Dialog = function Dialog(_ref) {
     }
   }, /*#__PURE__*/React.createElement(portal.default, {
     open: open || _isVisible,
-    lockable: true
+    modal: true
   }, /*#__PURE__*/React.createElement(popup.default, _objectSpread(_objectSpread({}, props), {}, {
     closable: closable,
     open: open,

package/dist/components/dialog/dialog.mjs

@@ -36,7 +36,7 @@ var Dialog = function Dialog(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Portal, {
     open: open || _isVisible,
-    lockable: true
+    modal: true
   }, /*#__PURE__*/React.createElement(Popup, _objectSpread(_objectSpread({}, props), {}, {
     closable: closable,
     open: open,

package/dist/components/drawer/context.cjs

@@ -1,15 +1,14 @@
 'use strict';
 
 /**
- * @description
- * class names
+ * @zh Drawer 的 class 名称
+ * @en class names for Drawer
  */
 var CLASS_NAMES = {
   drawer: "drawer",
-  overlay: "drawer__overlay",
-  panel: "drawer__panel",
   header: "drawer__header",
-  body: "drawer__body"
+  body: "drawer__body",
+  actions: "drawer__actions"
 };
 
 exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -1,11 +1,10 @@
 /**
- * @description
- * class names
+ * @zh Drawer 的 class 名称
+ * @en class names for Drawer
  */
 export declare const CLASS_NAMES: {
     readonly drawer: "drawer";
-    readonly overlay: "drawer__overlay";
-    readonly panel: "drawer__panel";
     readonly header: "drawer__header";
     readonly body: "drawer__body";
+    readonly actions: "drawer__actions";
 };

package/dist/components/drawer/context.mjs

@@ -1,13 +1,12 @@
 /**
- * @description
- * class names
+ * @zh Drawer 的 class 名称
+ * @en class names for Drawer
  */
 var CLASS_NAMES = {
   drawer: "drawer",
-  overlay: "drawer__overlay",
-  panel: "drawer__panel",
   header: "drawer__header",
-  body: "drawer__body"
+  body: "drawer__body",
+  actions: "drawer__actions"
 };
 
 export { CLASS_NAMES };

package/dist/components/drawer/drawer.cjs

@@ -6,11 +6,41 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var portal = require('../portal/portal.cjs');
-var popup = require('./popup.cjs');
-var relax = require('@aiszlab/relax');
+var sheet = require('../sheet/sheet.cjs');
+var button = require('../button/button.cjs');
+var space = require('../space/space.cjs');
+var useLocale = require('../../locale/use-locale.cjs');
+var useClosable = require('../../hooks/use-closable.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+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 useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var theme = require('../theme/theme.cjs');
+var context = require('./context.cjs');
 
 var _excluded = ["open", "size", "closable", "placement"];
+/**
+ * @zh Drawer 专用样式：包含关闭按钮、标题和确认按钮的头部栏，以及面板背景。
+ * @en Drawer-specific styles: header bar with closer, title, confirm button, and panel background.
+ */
+var styles = {
+  header: {
+    k1xSpc: "musaex-78zum5",
+    kg3NbH: "musaex-1v4gb6w",
+    k8WAf4: "musaex-1aur8i7",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-wcf3z5",
+    kt9PQ7: "musaex-d1xpcx",
+    kfdmCh: "musaex-1q0q8m5",
+    kL6WhQ: "musaex-quqrak",
+    $$css: true
+  }
+};
+/**
+ * @zh Drawer 组件。从屏幕任意边缘滑入的模态面板。基于共享的 Sheet 基础组件构建。
+ * @en Drawer component. A modal panel that slides in from any screen edge.
+ * Built on the shared Sheet base component.
+ */
 var Drawer = function Drawer(_ref) {
   var open = _ref.open,
     _ref$size = _ref.size,
@@ -20,29 +50,43 @@ var Drawer = function Drawer(_ref) {
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "right" : _ref$placement,
     props = _objectWithoutProperties(_ref, _excluded);
-  // `Portal` should disappear after `Drawer` disappear animation completely
-  var _useBoolean = relax.useBoolean(false),
-    _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    _isVisible = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    turnOn = _useBoolean2$.turnOn,
-    turnOff = _useBoolean2$.turnOff;
-  React.useEffect(function () {
-    if (open) {
-      turnOn();
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var _useLocale = useLocale.useLocale("drawer"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant"]);
+  var _useClosable = useClosable.useClosable({
+      closable: closable,
+      onClose: props.onClose
+    }),
+    closer = _useClosable.closer;
+  var styled = {
+    header: stylex.props(theme.$body.large, styles.header),
+    actions: {
+      className: "musaex-vc5jky"
+    },
+    panel: {
+      className: "musaex-1q2mt7c"
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return /*#__PURE__*/React.createElement(portal.default, {
-    open: open || _isVisible,
-    lockable: true
-  }, /*#__PURE__*/React.createElement(popup.default, _objectSpread(_objectSpread({}, props), {}, {
-    onClosed: turnOff,
+  };
+  return /*#__PURE__*/React.createElement(sheet.default, {
+    visible: open,
+    placement: placement,
     size: size,
-    open: open,
     closable: closable,
-    placement: placement
-  })));
+    onClose: props.onClose,
+    className: classNames.drawer,
+    header: /*#__PURE__*/React.createElement("div", {
+      className: className.stringify(classNames.header, styled.header.className),
+      style: _objectSpread(_objectSpread({}, styled.header.style), themeColorVars)
+    }, closer, props.title, props.onConfirm && (/*#__PURE__*/React.createElement(space.default, {
+      className: styled.actions.className,
+      style: styled.actions.style
+    }, /*#__PURE__*/React.createElement(button.Button, {
+      onClick: props.onConfirm
+    }, locale.confirm)))),
+    panelClassName: styled.panel.className
+  }, props.children);
 };
 
 exports.default = Drawer;

package/dist/components/drawer/drawer.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
 import type { DrawerProps } from "../../types/drawer";
+/**
+ * @zh Drawer 组件。从屏幕任意边缘滑入的模态面板。基于共享的 Sheet 基础组件构建。
+ * @en Drawer component. A modal panel that slides in from any screen edge.
+ * Built on the shared Sheet base component.
+ */
 declare const Drawer: ({ open, size, closable, placement, ...props }: DrawerProps) => React.JSX.Element;
 export default Drawer;

package/dist/components/drawer/drawer.mjs

@@ -1,12 +1,42 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useEffect } from 'react';
-import Portal from '../portal/portal.mjs';
-import Popup from './popup.mjs';
-import { useBoolean } from '@aiszlab/relax';
+import React from 'react';
+import Sheet from '../sheet/sheet.mjs';
+import { Button } from '../button/button.mjs';
+import Space from '../space/space.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { useClosable } from '../../hooks/use-closable.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+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 { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { $body } from '../theme/theme.mjs';
+import { CLASS_NAMES } from './context.mjs';
 
 var _excluded = ["open", "size", "closable", "placement"];
+/**
+ * @zh Drawer 专用样式：包含关闭按钮、标题和确认按钮的头部栏，以及面板背景。
+ * @en Drawer-specific styles: header bar with closer, title, confirm button, and panel background.
+ */
+var styles = {
+  header: {
+    k1xSpc: "musaex-78zum5",
+    kg3NbH: "musaex-1v4gb6w",
+    k8WAf4: "musaex-1aur8i7",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-wcf3z5",
+    kt9PQ7: "musaex-d1xpcx",
+    kfdmCh: "musaex-1q0q8m5",
+    kL6WhQ: "musaex-quqrak",
+    $$css: true
+  }
+};
+/**
+ * @zh Drawer 组件。从屏幕任意边缘滑入的模态面板。基于共享的 Sheet 基础组件构建。
+ * @en Drawer component. A modal panel that slides in from any screen edge.
+ * Built on the shared Sheet base component.
+ */
 var Drawer = function Drawer(_ref) {
   var open = _ref.open,
     _ref$size = _ref.size,
@@ -15,30 +45,44 @@ var Drawer = function Drawer(_ref) {
     closable = _ref$closable === void 0 ? true : _ref$closable,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "right" : _ref$placement,
-    props = _objectWithoutProperties(_ref, _excluded);
-  // `Portal` should disappear after `Drawer` disappear animation completely
-  var _useBoolean = useBoolean(false),
-    _useBoolean2 = _slicedToArray(_useBoolean, 2),
-    _isVisible = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    turnOn = _useBoolean2$.turnOn,
-    turnOff = _useBoolean2$.turnOff;
-  useEffect(function () {
-    if (open) {
-      turnOn();
+    props$1 = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames(CLASS_NAMES);
+  var _useLocale = useLocale("drawer"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  var themeColorVars = useThemeColorVars(["outline-variant"]);
+  var _useClosable = useClosable({
+      closable: closable,
+      onClose: props$1.onClose
+    }),
+    closer = _useClosable.closer;
+  var styled = {
+    header: props($body.large, styles.header),
+    actions: {
+      className: "musaex-vc5jky"
+    },
+    panel: {
+      className: "musaex-1q2mt7c"
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-  return /*#__PURE__*/React.createElement(Portal, {
-    open: open || _isVisible,
-    lockable: true
-  }, /*#__PURE__*/React.createElement(Popup, _objectSpread(_objectSpread({}, props), {}, {
-    onClosed: turnOff,
+  };
+  return /*#__PURE__*/React.createElement(Sheet, {
+    visible: open,
+    placement: placement,
     size: size,
-    open: open,
     closable: closable,
-    placement: placement
-  })));
+    onClose: props$1.onClose,
+    className: classNames.drawer,
+    header: /*#__PURE__*/React.createElement("div", {
+      className: stringify(classNames.header, styled.header.className),
+      style: _objectSpread(_objectSpread({}, styled.header.style), themeColorVars)
+    }, closer, props$1.title, props$1.onConfirm && (/*#__PURE__*/React.createElement(Space, {
+      className: styled.actions.className,
+      style: styled.actions.style
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: props$1.onConfirm
+    }, locale.confirm)))),
+    panelClassName: styled.panel.className
+  }, props$1.children);
 };
 
 export { Drawer as default };

package/dist/components/image/preview/operations.cjs

@@ -55,7 +55,7 @@ var Operations = function Operations(_ref) {
     total = _ref2$total === void 0 ? 1 : _ref2$total;
   var isMultiple = total > 1;
   return /*#__PURE__*/React.createElement(portal.default, {
-    lockable: true
+    modal: true
   }, /*#__PURE__*/React.createElement("div", {
     className: styled.operations.className,
     style: _objectSpread(_objectSpread({}, styled.operations.style), {}, {

package/dist/components/image/preview/operations.mjs

@@ -51,7 +51,7 @@ var Operations = function Operations(_ref) {
     total = _ref2$total === void 0 ? 1 : _ref2$total;
   var isMultiple = total > 1;
   return /*#__PURE__*/React.createElement(Portal, {
-    lockable: true
+    modal: true
   }, /*#__PURE__*/React.createElement("div", {
     className: styled.operations.className,
     style: _objectSpread(_objectSpread({}, styled.operations.style), {}, {

package/dist/components/portal/portal.cjs

@@ -14,8 +14,8 @@ var Portal = function Portal(_ref) {
     open = _ref$open === void 0 ? true : _ref$open,
     _ref$destroyable = _ref.destroyable,
     destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable,
-    _ref$lockable = _ref.lockable,
-    lockable = _ref$lockable === void 0 ? false : _ref$lockable,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? false : _ref$modal,
     container = _ref.container;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -32,7 +32,7 @@ var Portal = function Portal(_ref) {
       setShouldRender(open);
     }
   }, [destroyable, open]);
-  relax.useScrollLocker(relax.isDomUsable() && lockable && open);
+  relax.useScrollLocker(relax.isDomUsable() && modal && open);
   if (!(shouldRender || open)) return null;
   if (!_container) return null;
   return /*#__PURE__*/reactDom.createPortal(children, _container);

package/dist/components/portal/portal.mjs

@@ -10,8 +10,8 @@ var Portal = function Portal(_ref) {
     open = _ref$open === void 0 ? true : _ref$open,
     _ref$destroyable = _ref.destroyable,
     destroyable = _ref$destroyable === void 0 ? false : _ref$destroyable,
-    _ref$lockable = _ref.lockable,
-    lockable = _ref$lockable === void 0 ? false : _ref$lockable,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? false : _ref$modal,
     container = _ref.container;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -28,7 +28,7 @@ var Portal = function Portal(_ref) {
       setShouldRender(open);
     }
   }, [destroyable, open]);
-  useScrollLocker(isDomUsable() && lockable && open);
+  useScrollLocker(isDomUsable() && modal && open);
   if (!(shouldRender || open)) return null;
   if (!_container) return null;
   return /*#__PURE__*/createPortal(children, _container);

package/dist/components/sheet/context.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * @zh 共享的 Sheet 基础组件 BEM 类名。
+ * @en Shared BEM class names for the Sheet base component.
+ */
+var CLASS_NAMES = {
+  sheet: "sheet",
+  overlay: "sheet__overlay",
+  panel: "sheet__panel",
+  body: "sheet__body"
+};
+
+exports.CLASS_NAMES = CLASS_NAMES;

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

@@ -0,0 +1,10 @@
+/**
+ * @zh 共享的 Sheet 基础组件 BEM 类名。
+ * @en Shared BEM class names for the Sheet base component.
+ */
+export declare const CLASS_NAMES: {
+    readonly sheet: "sheet";
+    readonly overlay: "sheet__overlay";
+    readonly panel: "sheet__panel";
+    readonly body: "sheet__body";
+};