musae 1.3.1-beta.7 → 1.3.1-beta.9

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var styles = require('./styles.cjs');
 var React = require('react');
 var sheet = require('../sheet/sheet.cjs');
@@ -13,7 +12,6 @@ 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", "modal"];
 /**
  * @zh BottomSheet 组件。从底部滑入的模态面板，带有拖拽手柄指示器。
  * 基于共享的 Sheet 基础组件构建。
@@ -21,14 +19,20 @@ var _excluded = ["open", "height", "closable", "modal"];
  * with a drag handle indicator. Built on the shared Sheet base component.
  */
 var BottomSheet = function BottomSheet(_ref) {
-  var open = _ref.open,
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _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);
+    onClose = _ref.onClose,
+    className$1 = _ref.className,
+    style = _ref.style,
+    panelClassName = _ref.panelClassName,
+    panelStyle = _ref.panelStyle,
+    children = _ref.children;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var themeColorVars = useThemeColorVars.useThemeColorVars(["on-surface-variant"]);
   var styled = {
@@ -49,11 +53,13 @@ var BottomSheet = function BottomSheet(_ref) {
     size: height,
     closable: closable,
     modal: modal,
-    onClose: props.onClose,
-    className: classNames.sheet,
+    onClose: onClose,
+    className: className.stringify(classNames.sheet, className$1),
+    style: style,
     header: header,
-    panelClassName: styled.panel.className
-  }, props.children);
+    panelClassName: className.stringify(styled.panel.className, panelClassName),
+    panelStyle: _objectSpread(_objectSpread({}, styled.panel.style), panelStyle)
+  }, children);
 };
 
 exports.default = BottomSheet;

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

@@ -6,5 +6,5 @@ import type { BottomSheetProps } from "../../types/bottom-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;
+declare const BottomSheet: ({ open, height, closable, modal, onClose, className, style, panelClassName, panelStyle, children, }: BottomSheetProps) => React.JSX.Element;
 export default BottomSheet;

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

@@ -1,5 +1,4 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import styles from './styles.mjs';
 import React from 'react';
 import Sheet from '../sheet/sheet.mjs';
@@ -9,7 +8,6 @@ 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", "modal"];
 /**
  * @zh BottomSheet 组件。从底部滑入的模态面板，带有拖拽手柄指示器。
  * 基于共享的 Sheet 基础组件构建。
@@ -17,14 +15,20 @@ var _excluded = ["open", "height", "closable", "modal"];
  * with a drag handle indicator. Built on the shared Sheet base component.
  */
 var BottomSheet = function BottomSheet(_ref) {
-  var open = _ref.open,
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _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$1 = _objectWithoutProperties(_ref, _excluded);
+    onClose = _ref.onClose,
+    className = _ref.className,
+    style = _ref.style,
+    panelClassName = _ref.panelClassName,
+    panelStyle = _ref.panelStyle,
+    children = _ref.children;
   var classNames = useClassNames(CLASS_NAMES);
   var themeColorVars = useThemeColorVars(["on-surface-variant"]);
   var styled = {
@@ -45,11 +49,13 @@ var BottomSheet = function BottomSheet(_ref) {
     size: height,
     closable: closable,
     modal: modal,
-    onClose: props$1.onClose,
-    className: classNames.sheet,
+    onClose: onClose,
+    className: stringify(classNames.sheet, className),
+    style: style,
     header: header,
-    panelClassName: styled.panel.className
-  }, props$1.children);
+    panelClassName: stringify(styled.panel.className, panelClassName),
+    panelStyle: _objectSpread(_objectSpread({}, styled.panel.style), panelStyle)
+  }, children);
 };
 
 export { BottomSheet as default };

package/dist/components/search/bar.cjs

@@ -4,13 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var button = require('../button/button.cjs');
 var search = require('../icon/icons/action/search.cjs');
-var input = require('../input/input.cjs');
-var theme = require('../theme/theme.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
 var React = require('react');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var context = require('./context.cjs');
+var field = require('./field.cjs');
 var styles = require('./styles.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
 
@@ -31,7 +30,6 @@ var SearchBar = function SearchBar(_ref) {
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var hasValue = value.length > 0;
   var styled = {
-    input: stylex.props(theme.$body.large),
     leading: stylex.props(styles.default.leading.base),
     trailing: stylex.props(styles.default.trailing.base),
     clear: stylex.props(styles.default.clear.base),
@@ -60,11 +58,8 @@ var SearchBar = function SearchBar(_ref) {
   }, searchButton));
   var hasConsumerTrailing = !!trailing;
   var hasTrailing = !!clearAction || hasConsumerTrailing || !!searchButtonAction;
-  return /*#__PURE__*/React.createElement(input.default, {
-    ref: inputRef,
-    className: className.stringify(classNames.searchInput, styled.input.className),
-    variant: "filled",
-    shaped: true,
+  return /*#__PURE__*/React.createElement(field.default, {
+    inputRef: inputRef,
     value: value,
     placeholder: placeholder,
     disabled: disabled,

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

@@ -1,13 +1,12 @@
 import React from "react";
 import type { FocusEventHandler, KeyboardEventHandler, Ref } from "react";
-import type { InputRef } from "../../types/input";
 import type { SearchProps } from "../../types/search";
 /**
  * @zh 私有 Search Bar 属性
  * @en Private Search Bar props
  */
 export type SearchBarProps = Pick<SearchProps, "clearable" | "disabled" | "leading" | "placeholder" | "searchButton" | "trailing"> & {
-    inputRef: Ref<InputRef>;
+    inputRef: Ref<HTMLInputElement>;
     value: string;
     onChange: (value: string) => void;
     onClear: () => void;

package/dist/components/search/bar.mjs

@@ -1,12 +1,11 @@
 import { Button } from '../button/button.mjs';
 import IconSearch from '../icon/icons/action/search.mjs';
-import Input from '../input/input.mjs';
-import { $body } from '../theme/theme.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CLASS_NAMES } from './context.mjs';
+import SearchField from './field.mjs';
 import styles from './styles.mjs';
 import IconClose from '../icon/icons/navigation/close.mjs';
 
@@ -27,7 +26,6 @@ var SearchBar = function SearchBar(_ref) {
   var classNames = useClassNames(CLASS_NAMES);
   var hasValue = value.length > 0;
   var styled = {
-    input: props($body.large),
     leading: props(styles.leading.base),
     trailing: props(styles.trailing.base),
     clear: props(styles.clear.base),
@@ -56,11 +54,8 @@ var SearchBar = function SearchBar(_ref) {
   }, searchButton));
   var hasConsumerTrailing = !!trailing;
   var hasTrailing = !!clearAction || hasConsumerTrailing || !!searchButtonAction;
-  return /*#__PURE__*/React.createElement(Input, {
-    ref: inputRef,
-    className: stringify(classNames.searchInput, styled.input.className),
-    variant: "filled",
-    shaped: true,
+  return /*#__PURE__*/React.createElement(SearchField, {
+    inputRef: inputRef,
     value: value,
     placeholder: placeholder,
     disabled: disabled,

package/dist/components/search/context.cjs

@@ -7,6 +7,7 @@
 var CLASS_NAMES = {
   search: "search",
   searchInput: "search-input",
+  searchInputControl: "search-input__control",
   searchLeading: "search-leading",
   searchTrailing: "search-trailing",
   searchClear: "search-clear",

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

@@ -5,6 +5,7 @@
 export declare const CLASS_NAMES: {
     readonly search: "search";
     readonly searchInput: "search-input";
+    readonly searchInputControl: "search-input__control";
     readonly searchLeading: "search-leading";
     readonly searchTrailing: "search-trailing";
     readonly searchClear: "search-clear";

package/dist/components/search/context.mjs

@@ -5,6 +5,7 @@
 var CLASS_NAMES = {
   search: "search",
   searchInput: "search-input",
+  searchInputControl: "search-input__control",
   searchLeading: "search-leading",
   searchTrailing: "search-trailing",
   searchClear: "search-clear",

package/dist/components/search/field.cjs

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

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

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

package/dist/components/search/field.mjs

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

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

@@ -58,11 +58,9 @@ var SearchResultList = function SearchResultList(_ref) {
       className: className.stringify(classNames.searchResultItem, _defineProperty(_defineProperty({}, classNames.searchResultItemActive, isActive), classNames.searchResultItemDisabled, !!item.disabled), itemStyles.className),
       style: itemStyles.style
     }, !item.disabled && {
-      onPointerMove: function onPointerMove() {
-        return onActiveKeyChange(item.key);
-      },
       onClick: function onClick() {
-        return onSelect(item);
+        onActiveKeyChange(item.key);
+        onSelect(item);
       }
     }), relax.isFunction(renderItem) ? itemContent : (/*#__PURE__*/React.createElement(React.Fragment, null, hasLeading && (/*#__PURE__*/React.createElement("span", {
       className: className.stringify(classNames.searchResultItemLeading, styled.leading.className),

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

@@ -54,11 +54,9 @@ var SearchResultList = function SearchResultList(_ref) {
       className: stringify(classNames.searchResultItem, _defineProperty(_defineProperty({}, classNames.searchResultItemActive, isActive), classNames.searchResultItemDisabled, !!item.disabled), itemStyles.className),
       style: itemStyles.style
     }, !item.disabled && {
-      onPointerMove: function onPointerMove() {
-        return onActiveKeyChange(item.key);
-      },
       onClick: function onClick() {
-        return onSelect(item);
+        onActiveKeyChange(item.key);
+        onSelect(item);
       }
     }), isFunction(renderItem) ? itemContent : (/*#__PURE__*/React.createElement(React.Fragment, null, hasLeading && (/*#__PURE__*/React.createElement("span", {
       className: stringify(classNames.searchResultItemLeading, styled.leading.className),

package/dist/components/search/styles.cjs

@@ -12,6 +12,66 @@ var container = {
     $$css: true
   }
 };
+var field = {
+  root: {
+    kVAEAm: "musaex-1n2onr6",
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kB7OPa: "musaex-9f619",
+    kzqmXN: "musaex-92755x",
+    k7Eaqz: "musaex-1rdiejn",
+    kZKoxP: "musaex-1s2k5h2",
+    kogj98: "musaex-q3gua8",
+    k8WAf4: "musaex-11owsmz",
+    kg3NbH: "musaex-ipt7de",
+    kWkggS: "musaex-1b8defr",
+    kMwMTN: "musaex-bq1wot",
+    kkrTdU: "musaex-1ed109x",
+    $$css: true
+  },
+  enabled: {
+    kSReZ0: "musaex-usidmp",
+    $$css: true
+  },
+  pill: {
+    kaIpWk: "musaex-shxsqp",
+    $$css: true
+  },
+  standard: {
+    kZKoxP: "musaex-qg7gut",
+    kaIpWk: "musaex-mgj2z",
+    $$css: true
+  },
+  disabled: {
+    kWkggS: "musaex-1j73dxc",
+    kMwMTN: "musaex-1ldep6k",
+    kkrTdU: "musaex-t0e3qv",
+    $$css: true
+  }
+};
+var fieldInput = {
+  base: {
+    kUk6DE: "musaex-98rzlu",
+    k7Eaqz: "musaex-1rdiejn",
+    kZKoxP: "musaex-kyvkcq",
+    kogj98: "musaex-q3gua8",
+    kmVPX3: "musaex-1n775ky",
+    kMzoRj: "musaex-k59kd",
+    kI3sdo: "musaex-4fx59i",
+    kWkggS: "musaex-jbqb8w",
+    kMwMTN: "musaex-1j14bxn",
+    knGrYV: "musaex-l7pqhg",
+    kGuDYH: "musaex-1qlqyl8",
+    kLWn49: "musaex-15bjb6t",
+    k8Qsv1: "musaex-19r3k9r",
+    $$css: true
+  },
+  disabled: {
+    kMwMTN: "musaex-1ldep6k",
+    k8Qsv1: "musaex-1tfpmi6",
+    $$css: true
+  }
+};
 var leading = {
   base: {
     k1xSpc: "musaex-3nfvp2",
@@ -50,7 +110,6 @@ var clear = {
     kkrTdU: "musaex-1ypdohk",
     kaIpWk: "musaex-shxsqp",
     kmVPX3: "musaex-1nskiab",
-    kHE3J0: "musaex-1rfa64k",
     $$css: true
   }
 };
@@ -163,7 +222,6 @@ var resultList = {
     kOIVth: "musaex-g4b44g",
     kMwMTN: "musaex-bq1wot",
     kkrTdU: "musaex-1ypdohk",
-    kHE3J0: "musaex-1rfa64k",
     $$css: true
   },
   activeItem: {
@@ -206,6 +264,8 @@ var resultList = {
 };
 var styles = {
   container: container,
+  field: field,
+  fieldInput: fieldInput,
   leading: leading,
   trailing: trailing,
   clear: clear,

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

@@ -8,6 +8,65 @@ declare const styles: {
             readonly maxWidth: import("@stylexjs/stylex").StyleXClassNameFor<"maxWidth", string>;
         }>;
     }>;
+    field: Readonly<{
+        readonly root: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "relative">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+            readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly margin: import("@stylexjs/stylex").StyleXClassNameFor<"margin", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container-high)">;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
+            readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "text">;
+        }>;
+        readonly enabled: Readonly<{
+            readonly ":active": import("@stylexjs/stylex").StyleXClassNameFor<":active", {
+                readonly backgroundColor: `color-mix(in srgb, var(--color-on-surface) ${number}%, var(--color-surface-container-high))`;
+            }>;
+        }>;
+        readonly pill: Readonly<{
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+        }>;
+        readonly standard: Readonly<{
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+        }>;
+        readonly disabled: Readonly<{
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-on-surface-opacity-12)">;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-opacity-38)">;
+            readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "default">;
+        }>;
+    }>;
+    fieldInput: Readonly<{
+        readonly base: Readonly<{
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
+            readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly margin: import("@stylexjs/stylex").StyleXClassNameFor<"margin", string>;
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+            readonly outline: import("@stylexjs/stylex").StyleXClassNameFor<"outline", string>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "transparent">;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface)">;
+            readonly caretColor: import("@stylexjs/stylex").StyleXClassNameFor<"caretColor", "var(--color-primary)">;
+            readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "inherit">;
+            readonly lineHeight: import("@stylexjs/stylex").StyleXClassNameFor<"lineHeight", "inherit">;
+            readonly "::placeholder": import("@stylexjs/stylex").StyleXClassNameFor<"::placeholder", {
+                readonly color: "var(--color-on-surface-variant)";
+            }>;
+        }>;
+        readonly disabled: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-opacity-38)">;
+            readonly "::placeholder": import("@stylexjs/stylex").StyleXClassNameFor<"::placeholder", {
+                readonly color: "var(--color-on-surface-opacity-38)";
+            }>;
+        }>;
+    }>;
     leading: Readonly<{
         readonly base: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
@@ -44,11 +103,6 @@ declare const styles: {
             readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
             readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
             readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
-            readonly ":hover": import("@stylexjs/stylex").StyleXClassNameFor<":hover", {
-                readonly "@media (hover: hover)": {
-                    readonly backgroundColor: "var(--color-on-surface-opacity-08)";
-                };
-            }>;
         }>;
     }>;
     searchButton: Readonly<{
@@ -148,11 +202,6 @@ declare const styles: {
             readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-variant)">;
             readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
-            readonly ":hover": import("@stylexjs/stylex").StyleXClassNameFor<":hover", {
-                readonly "@media (hover: hover)": {
-                    readonly backgroundColor: "var(--color-on-surface-opacity-08)";
-                };
-            }>;
         }>;
         readonly activeItem: Readonly<{
             readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-on-surface-opacity-08)">;

package/dist/components/search/styles.mjs

@@ -8,6 +8,66 @@ var container = {
     $$css: true
   }
 };
+var field = {
+  root: {
+    kVAEAm: "musaex-1n2onr6",
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kB7OPa: "musaex-9f619",
+    kzqmXN: "musaex-92755x",
+    k7Eaqz: "musaex-1rdiejn",
+    kZKoxP: "musaex-1s2k5h2",
+    kogj98: "musaex-q3gua8",
+    k8WAf4: "musaex-11owsmz",
+    kg3NbH: "musaex-ipt7de",
+    kWkggS: "musaex-1b8defr",
+    kMwMTN: "musaex-bq1wot",
+    kkrTdU: "musaex-1ed109x",
+    $$css: true
+  },
+  enabled: {
+    kSReZ0: "musaex-usidmp",
+    $$css: true
+  },
+  pill: {
+    kaIpWk: "musaex-shxsqp",
+    $$css: true
+  },
+  standard: {
+    kZKoxP: "musaex-qg7gut",
+    kaIpWk: "musaex-mgj2z",
+    $$css: true
+  },
+  disabled: {
+    kWkggS: "musaex-1j73dxc",
+    kMwMTN: "musaex-1ldep6k",
+    kkrTdU: "musaex-t0e3qv",
+    $$css: true
+  }
+};
+var fieldInput = {
+  base: {
+    kUk6DE: "musaex-98rzlu",
+    k7Eaqz: "musaex-1rdiejn",
+    kZKoxP: "musaex-kyvkcq",
+    kogj98: "musaex-q3gua8",
+    kmVPX3: "musaex-1n775ky",
+    kMzoRj: "musaex-k59kd",
+    kI3sdo: "musaex-4fx59i",
+    kWkggS: "musaex-jbqb8w",
+    kMwMTN: "musaex-1j14bxn",
+    knGrYV: "musaex-l7pqhg",
+    kGuDYH: "musaex-1qlqyl8",
+    kLWn49: "musaex-15bjb6t",
+    k8Qsv1: "musaex-19r3k9r",
+    $$css: true
+  },
+  disabled: {
+    kMwMTN: "musaex-1ldep6k",
+    k8Qsv1: "musaex-1tfpmi6",
+    $$css: true
+  }
+};
 var leading = {
   base: {
     k1xSpc: "musaex-3nfvp2",
@@ -46,7 +106,6 @@ var clear = {
     kkrTdU: "musaex-1ypdohk",
     kaIpWk: "musaex-shxsqp",
     kmVPX3: "musaex-1nskiab",
-    kHE3J0: "musaex-1rfa64k",
     $$css: true
   }
 };
@@ -159,7 +218,6 @@ var resultList = {
     kOIVth: "musaex-g4b44g",
     kMwMTN: "musaex-bq1wot",
     kkrTdU: "musaex-1ypdohk",
-    kHE3J0: "musaex-1rfa64k",
     $$css: true
   },
   activeItem: {
@@ -202,6 +260,8 @@ var resultList = {
 };
 var styles = {
   container: container,
+  field: field,
+  fieldInput: fieldInput,
   leading: leading,
   trailing: trailing,
   clear: clear,

package/dist/components/search/view.cjs

@@ -8,9 +8,9 @@ var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modu
 var className = require('@aiszlab/relax/class-name');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
-var input = require('../input/input.cjs');
 var portal = require('../portal/portal.cjs');
 var context = require('./context.cjs');
+var field = require('./field.cjs');
 var styles = require('./styles.cjs');
 var close = require('../icon/icons/navigation/close.cjs');
 var arrowBack = require('../icon/icons/navigation/arrow-back.cjs');
@@ -76,9 +76,8 @@ var SearchView = function SearchView(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.searchViewHeader, styled.header.className),
     style: styled.header.style
-  }, /*#__PURE__*/React.createElement(input.default, {
-    ref: inputRef,
-    variant: "filled",
+  }, /*#__PURE__*/React.createElement(field.default, {
+    inputRef: inputRef,
     shape: mode === "modal" ? "pill" : "standard",
     role: "combobox",
     "aria-expanded": open,

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

@@ -1,13 +1,12 @@
 import React from "react";
 import type { KeyboardEventHandler, ReactNode, Ref } from "react";
-import type { InputRef } from "../../types/input";
 import type { ResolvedSearchView, SearchProps } from "../../types/search";
 /**
  * @zh 私有 Search View 属性
  * @en Private Search View props
  */
 export type SearchViewProps = Pick<SearchProps, "clearable" | "disabled" | "placeholder"> & {
-    inputRef: Ref<InputRef>;
+    inputRef: Ref<HTMLInputElement>;
     mode: ResolvedSearchView;
     open: boolean;
     value: string;

package/dist/components/search/view.mjs

@@ -4,9 +4,9 @@ import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_mod
 import { stringify } from '@aiszlab/relax/class-name';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
-import Input from '../input/input.mjs';
 import Portal from '../portal/portal.mjs';
 import { CLASS_NAMES } from './context.mjs';
+import SearchField from './field.mjs';
 import styles from './styles.mjs';
 import IconClose from '../icon/icons/navigation/close.mjs';
 import IconArrowBack from '../icon/icons/navigation/arrow-back.mjs';
@@ -72,9 +72,8 @@ var SearchView = function SearchView(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.searchViewHeader, styled.header.className),
     style: styled.header.style
-  }, /*#__PURE__*/React.createElement(Input, {
-    ref: inputRef,
-    variant: "filled",
+  }, /*#__PURE__*/React.createElement(SearchField, {
+    inputRef: inputRef,
     shape: mode === "modal" ? "pill" : "standard",
     role: "combobox",
     "aria-expanded": open,

package/dist/components/sheet/sheet.cjs

@@ -40,6 +40,7 @@ var Sheet = function Sheet(_ref) {
     header = _ref.header,
     footer = _ref.footer,
     className$1 = _ref.className,
+    style = _ref.style,
     panelClassName = _ref.panelClassName,
     panelStyle = _ref.panelStyle,
     _ref$modal = _ref.modal,
@@ -123,7 +124,7 @@ var Sheet = function Sheet(_ref) {
     stackLevel: stylex.props(styles.default.stackLevel.base),
     container: stylex.props(styles.default.stackLevel.base, styles.default.container.base, modal && styles.default.container.modal),
     overlay: stylex.props(styles.default.overlay.base),
-    panel: stylex.props(styles.default.panel.base, styles.default.panel[placement], styles.default.panel.fullscreen)
+    panel: stylex.props(styles.default.panel.base, styles.default.panel[placement])
   };
   return /*#__PURE__*/React.createElement(portal.default, {
     open: visible || _isVisible,
@@ -140,7 +141,7 @@ var Sheet = function Sheet(_ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.container.style), themeColorVars), {}, {
       "--default-position": relax.at(_placement, 0),
       "--size": typeof size === "number" ? "".concat(size, "px") : size
-    }),
+    }, style),
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,

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

@@ -7,5 +7,5 @@ import type { SheetProps } from "../../types/sheet";
  * placement-driven slide animation, focus management, and body scroll lock.
  * Drawer and BottomSheet are thin wrappers around this component.
  */
-declare const Sheet: ({ visible, onClose, placement, size, closable, header, footer, className, panelClassName, panelStyle, modal, children, }: SheetProps) => React.JSX.Element;
+declare const Sheet: ({ visible, onClose, placement, size, closable, header, footer, className, style, panelClassName, panelStyle, modal, children, }: SheetProps) => React.JSX.Element;
 export default Sheet;

package/dist/components/sheet/sheet.mjs

@@ -36,6 +36,7 @@ var Sheet = function Sheet(_ref) {
     header = _ref.header,
     footer = _ref.footer,
     className = _ref.className,
+    style = _ref.style,
     panelClassName = _ref.panelClassName,
     panelStyle = _ref.panelStyle,
     _ref$modal = _ref.modal,
@@ -119,7 +120,7 @@ var Sheet = function Sheet(_ref) {
     stackLevel: props(styles.stackLevel.base),
     container: props(styles.stackLevel.base, styles.container.base, modal && styles.container.modal),
     overlay: props(styles.overlay.base),
-    panel: props(styles.panel.base, styles.panel[placement], styles.panel.fullscreen)
+    panel: props(styles.panel.base, styles.panel[placement])
   };
   return /*#__PURE__*/React.createElement(Portal, {
     open: visible || _isVisible,
@@ -136,7 +137,7 @@ var Sheet = function Sheet(_ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.container.style), themeColorVars), {}, {
       "--default-position": at(_placement, 0),
       "--size": typeof size === "number" ? "".concat(size, "px") : size
-    }),
+    }, style),
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,

package/dist/components/sheet/styles.cjs

@@ -69,15 +69,6 @@ var panel = {
     kCIrl2: "musaex-3m8u43",
     kZKoxP: "musaex-188dgw3",
     $$css: true
-  },
-  fullscreen: {
-    kRDq7Z: "musaex-1ej3teu",
-    kllhKz: "musaex-1pzvw0h",
-    kIfGbc: "musaex-1se81xg",
-    kBJAon: "musaex-19wv56r",
-    kGHaHD: "musaex-1m33i82",
-    kYNdYH: "musaex-1uogugb",
-    $$css: true
   }
 };
 var styles = {

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

@@ -58,16 +58,6 @@ declare const styles: {
             readonly right: import("@stylexjs/stylex").StyleXClassNameFor<"right", 0>;
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "var(--size)">;
         }>;
-        readonly fullscreen: Readonly<{
-            readonly "@media (max-width: 904px)": import("@stylexjs/stylex").StyleXClassNameFor<"@media (max-width: 904px)", {
-                readonly width: "100vw";
-                readonly height: "100vh";
-                readonly borderTopLeftRadius: 0;
-                readonly borderTopRightRadius: 0;
-                readonly borderBottomLeftRadius: 0;
-                readonly borderBottomRightRadius: 0;
-            }>;
-        }>;
     }>;
 };
 export default styles;

package/dist/components/sheet/styles.mjs

@@ -65,15 +65,6 @@ var panel = {
     kCIrl2: "musaex-3m8u43",
     kZKoxP: "musaex-188dgw3",
     $$css: true
-  },
-  fullscreen: {
-    kRDq7Z: "musaex-1ej3teu",
-    kllhKz: "musaex-1pzvw0h",
-    kIfGbc: "musaex-1se81xg",
-    kBJAon: "musaex-19wv56r",
-    kGHaHD: "musaex-1m33i82",
-    kYNdYH: "musaex-1uogugb",
-    $$css: true
   }
 };
 var styles = {

package/dist/styles.css

@@ -852,6 +852,10 @@
     box-sizing: border-box;
   }
 
+  .musaex-l7pqhg {
+    caret-color: var(--color-primary);
+  }
+
   .musaex-zpqnlu {
     clip: rect(0,0,0,0);
   }
@@ -1889,6 +1893,10 @@
     background-color: var(--color-primary-opacity-12);
   }
 
+  .musaex-usidmp:active {
+    background-color: color-mix(in srgb,var(--color-on-surface) NaN%,var(--color-surface-container-high));
+  }
+
   @media (hover: hover) {
     .musaex-1senyb1.musaex-1senyb1:not(:hover) > [role="button"], .musaex-s2sk4o.musaex-s2sk4o:hover > [role="separator"] {
       display: none;
@@ -2741,32 +2749,6 @@
     border-bottom-width: 0;
   }
 
-  @media (width <= 904px) {
-    .musaex-1m33i82.musaex-1m33i82 {
-      border-bottom-left-radius: 0;
-    }
-
-    .musaex-1uogugb.musaex-1uogugb {
-      border-bottom-right-radius: 0;
-    }
-
-    .musaex-1se81xg.musaex-1se81xg {
-      border-top-left-radius: 0;
-    }
-
-    .musaex-19wv56r.musaex-19wv56r {
-      border-top-right-radius: 0;
-    }
-
-    .musaex-1pzvw0h.musaex-1pzvw0h {
-      height: 100vh;
-    }
-
-    .musaex-1ej3teu.musaex-1ej3teu {
-      width: 100vw;
-    }
-  }
-
   @media (hover: hover) {
     .musaex-1fjziz3.musaex-1fjziz3:hover {
       overflow-y: auto;

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

@@ -1,39 +1,53 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type { ComponentProps } from "./element";
 import type { Closable } from "../hooks/use-closable";
 export interface BottomSheetProps extends ComponentProps {
     /**
-     * @description
-     * Controls open/close state of the bottom sheet.
+     * @zh 控制 Bottom Sheet 的打开状态。
+     * @en Controls whether the Bottom Sheet is open.
+     * @default false
      */
-    open: boolean;
+    open?: boolean;
     /**
-     * @description
-     * Called when the sheet requests to close (overlay click, Esc key).
+     * @zh Bottom Sheet 请求关闭时调用，例如点击遮罩层或按下 Esc 键。
+     * @en Called when the Bottom Sheet requests to close, such as after an overlay click or Esc key press.
+     * @default void 0
      */
-    onClose: VoidFunction;
+    onClose?: VoidFunction;
     /**
-     * @description
-     * Sheet content rendered below the drag handle.
+     * @zh 渲染在拖拽手柄下方的内容。
+     * @en Content rendered below the drag handle.
+     * @default void 0
      */
     children?: ReactNode;
     /**
-     * @description
-     * Height of the sheet panel. Accepts any CSS height value.
+     * @zh 应用到 Bottom Sheet 面板元素上的额外类名。
+     * @en Additional class name applied to the Bottom Sheet panel element.
+     * @default void 0
+     */
+    panelClassName?: string;
+    /**
+     * @zh 应用到 Bottom Sheet 面板元素上的额外内联样式。
+     * @en Additional inline styles applied to the Bottom Sheet panel element.
+     * @default void 0
+     */
+    panelStyle?: CSSProperties;
+    /**
+     * @zh 面板高度，接受数字（px）或任意 CSS 高度值。
+     * @en Height of the sheet panel. Accepts a number (px) or any CSS height value.
      * @default "50vh"
      */
     height?: number | string;
     /**
-     * @description
-     * Whether the sheet can be closed by overlay click or Esc key.
+     * @zh 是否可以通过点击遮罩层或按 Esc 键关闭。传入 `Closable` 数组以启用特定关闭方式。
+     * @en Whether the sheet can be closed by clicking the overlay or pressing Esc.
      * Pass an array of `Closable` values to enable specific close triggers.
      * @default true (all triggers enabled)
      */
     closable?: boolean | Closable[];
     /**
-     * @description
-     * Whether to enable modal locking (lock body scroll).
-     * Pass `false` to disable scroll locking.
+     * @zh 是否启用模态锁定（锁定 body 滚动）。传入 `false` 可禁用滚动锁定。
+     * @en Whether to enable modal locking (lock body scroll). Pass `false` to disable scroll locking.
      * @default true
      */
     modal?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.3.1-beta.7",
+  "version": "1.3.1-beta.9",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",