musae 1.3.1-beta.6 → 1.3.1-beta.7

package/dist/components/cascader/cascader.cjs

@@ -88,7 +88,6 @@ var Cascader = function Cascader(_ref) {
       leading: mode === "multiple" ? inputed : undefined,
       onBlur: close,
       onClick: toggle,
-      onInputorClick: toggle,
       readOnly: true
     });
   });

package/dist/components/cascader/cascader.mjs

@@ -84,7 +84,6 @@ var Cascader = function Cascader(_ref) {
       leading: mode === "multiple" ? inputed : undefined,
       onBlur: close,
       onClick: toggle,
-      onInputorClick: toggle,
       readOnly: true
     });
   });

package/dist/components/date-picker/date-picker.cjs

@@ -53,7 +53,6 @@ var DatePicker = function DatePicker(props) {
       value: (_value$format = value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD")) !== null && _value$format !== void 0 ? _value$format : "",
       onBlur: close,
       onClick: toggle,
-      onInputorClick: toggle,
       readOnly: true
     });
   });

package/dist/components/date-picker/date-picker.mjs

@@ -49,7 +49,6 @@ var DatePicker = function DatePicker(props$1) {
       value: (_value$format = value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD")) !== null && _value$format !== void 0 ? _value$format : "",
       onBlur: close,
       onClick: toggle,
-      onInputorClick: toggle,
       readOnly: true
     });
   });

package/dist/components/date-range-picker/date-range-picker.cjs

@@ -59,7 +59,6 @@ var DateRangePicker = function DateRangePicker(_ref) {
       value: (_from$format = from === null || from === void 0 ? void 0 : from.format("YYYY-MM-DD")) !== null && _from$format !== void 0 ? _from$format : "",
       onBlur: close,
       onClick: toggle,
-      onInputorClick: toggle,
       readOnly: true,
       trailing: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(swapHoriz.default, {
         className: classNames.separator

package/dist/components/date-range-picker/date-range-picker.mjs

@@ -55,7 +55,6 @@ var DateRangePicker = function DateRangePicker(_ref) {
       value: (_from$format = from === null || from === void 0 ? void 0 : from.format("YYYY-MM-DD")) !== null && _from$format !== void 0 ? _from$format : "",
       onBlur: close,
       onClick: toggle,
-      onInputorClick: toggle,
       readOnly: true,
       trailing: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconSwapHoriz, {
         className: classNames.separator

package/dist/components/input/__test__/input-appearance.test.d.ts

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

package/dist/components/input/__test__/style-contract.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input/hooks.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var relax = require('@aiszlab/relax');
 
 /**
  * @description
@@ -38,26 +37,5 @@ var useInputEvents = function useInputEvents(_ref) {
     click: click
   };
 };
-/**
- * @description
- * inputor events
- */
-var useInputorEvents = function useInputorEvents(_ref2) {
-  var inputRef = _ref2.inputRef,
-    onClick = _ref2.onClick;
-  // click
-  var click = React.useCallback(function (event) {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-    if (relax.isFunction(onClick)) {
-      event.stopPropagation();
-      onClick(event);
-    }
-  }, [inputRef, onClick]);
-  return {
-    click: click
-  };
-};
 
 exports.useInputEvents = useInputEvents;
-exports.useInputorEvents = useInputorEvents;

package/dist/components/input/hooks.d.ts

@@ -1,6 +1,5 @@
-import { type ChangeEventHandler, type Dispatch, type FocusEventHandler, type MouseEventHandler, type SetStateAction, type RefObject } from "react";
+import { type ChangeEventHandler, type Dispatch, type FocusEventHandler, type MouseEventHandler, type SetStateAction } from "react";
 import type { InputProps } from "../../types/input";
-import type { Nullable } from "@aiszlab/relax/types";
 /**
  * @description
  * use events for input
@@ -13,13 +12,3 @@ export declare const useInputEvents: ({ setValue, onBlur, onChange, onClick, onF
     change: ChangeEventHandler<HTMLInputElement>;
     click: MouseEventHandler<HTMLInputElement>;
 };
-/**
- * @description
- * inputor events
- */
-export declare const useInputorEvents: ({ inputRef, onClick, }: {
-    inputRef: RefObject<Nullable<HTMLInputElement>>;
-    onClick?: InputProps["onInputorClick"];
-}) => {
-    click: MouseEventHandler<HTMLDivElement>;
-};

package/dist/components/input/hooks.mjs

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { isFunction } from '@aiszlab/relax';
 
 /**
  * @description
@@ -36,25 +35,5 @@ var useInputEvents = function useInputEvents(_ref) {
     click: click
   };
 };
-/**
- * @description
- * inputor events
- */
-var useInputorEvents = function useInputorEvents(_ref2) {
-  var inputRef = _ref2.inputRef,
-    onClick = _ref2.onClick;
-  // click
-  var click = useCallback(function (event) {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-    if (isFunction(onClick)) {
-      event.stopPropagation();
-      onClick(event);
-    }
-  }, [inputRef, onClick]);
-  return {
-    click: click
-  };
-};
 
-export { useInputEvents, useInputorEvents };
+export { useInputEvents };

package/dist/components/input/input.cjs

@@ -18,7 +18,7 @@ var context = require('./context.cjs');
 var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
-var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "onInputorClick", "label"];
+var _excluded = ["className", "style", "type", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label"];
 /**
  * @author murukal
  * @zh 输入组件
@@ -27,7 +27,10 @@ var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className$1 = _ref.className,
     style = _ref.style,
-    type = _ref.type,
+    type = _ref.type;
+    _ref.variant;
+    var _ref$shaped = _ref.shaped,
+    shaped = _ref$shaped === void 0 ? false : _ref$shaped,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     disabled = _ref.disabled,
@@ -39,17 +42,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus = _ref.onFocus,
     leading = _ref.leading,
     trailing = _ref.trailing,
-    onInputorClick = _ref.onInputorClick,
     label = _ref.label,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputorRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var hasPlaceholder = !!inputProps.placeholder;
+  var hasLabel = !!label;
   var _useIdentity = relax.useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
-  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", "on-surface-variant", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thin]]);
+  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", "surface-container-high", "on-surface-variant", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thin]]);
   // controlled value
   var _useControlledState = relax.useControlledState(valueInProps, {
       defaultState: ""
@@ -90,11 +93,6 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onClick,
     onFocus: onFocus
   });
-  // inputor events
-  var inputorEvents = hooks.useInputorEvents({
-    inputRef: inputRef,
-    onClick: disabled ? undefined : onInputorClick
-  });
   // is focused
   var _useFocus = relax.useFocus({
       onBlur: inputEvents.blur,
@@ -109,16 +107,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     leading: stylex.props(styles_stylex.default.leading.base),
     trailing: stylex.props(styles_stylex.default.trailing.base),
     outline: stylex.props(styles_stylex.default.outline.base),
-    outlineLeading: stylex.props(styles_stylex.default.outlineLeading.base, disabled && styles_stylex.default.outlineLeading.disabled, invalid && styles_stylex.default.outlineLeading.invalid),
-    outlineNotch: stylex.props(styles_stylex.default.outlineNotch.base, theme.$body.small, !!label && styles_stylex.default.outlineNotch.withLabel, hasPlaceholder && !!label && styles_stylex.default.outlineNotch.withLabelAndPlaceholder, disabled && styles_stylex.default.outlineNotch.disabled, invalid && styles_stylex.default.outlineNotch.invalid),
-    outlineTrailing: stylex.props(styles_stylex.default.outlineTrailing.base, disabled && styles_stylex.default.outlineTrailing.disabled, invalid && styles_stylex.default.outlineTrailing.invalid),
+    outlineLeading: stylex.props(styles_stylex.default.outlineLeading.base, disabled && styles_stylex.default.outlineLeading.disabled, invalid && styles_stylex.default.outlineLeading.invalid, shaped && styles_stylex.default.outlineLeading.shaped),
+    outlineNotch: stylex.props(styles_stylex.default.outlineNotch.base, theme.$body.small, hasLabel && styles_stylex.default.outlineNotch.withLabel, hasLabel && hasPlaceholder && styles_stylex.default.outlineNotch.withLabelAndPlaceholder, disabled && styles_stylex.default.outlineNotch.disabled, invalid && styles_stylex.default.outlineNotch.invalid),
+    outlineTrailing: stylex.props(styles_stylex.default.outlineTrailing.base, disabled && styles_stylex.default.outlineTrailing.disabled, invalid && styles_stylex.default.outlineTrailing.invalid, shaped && styles_stylex.default.outlineTrailing.shaped),
     floatingLabel: stylex.props(styles_stylex.default.floatingLabel.base, hasPlaceholder && styles_stylex.default.floatingLabel.placeholder, disabled && styles_stylex.default.floatingLabel.disabled, invalid && styles_stylex.default.floatingLabel.invalid)
   };
   return /*#__PURE__*/React.createElement("div", _objectSpread({
     ref: inputorRef,
     className: className.stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className$1, styled.root.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.root.style), style), _themeColorVars),
-    onClick: inputorEvents.click
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.root.style), style), _themeColorVars)
   }, !disabled && {
     tabIndex: -1
   }), !!leading && (/*#__PURE__*/React.createElement("div", {
@@ -145,10 +142,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.outlineNotch, styled.outlineNotch.className),
     style: styled.outlineNotch.style
-  }, /*#__PURE__*/React.createElement("label", {
+  }, hasLabel && (/*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: className.stringify(styled.floatingLabel.className)
-  }, label)), /*#__PURE__*/React.createElement("div", {
+  }, label))), /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.outlineTrailing, styled.outlineTrailing.className),
     style: styled.outlineTrailing.style
   })), !!trailing && (/*#__PURE__*/React.createElement("div", {

package/dist/components/input/input.mjs

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import styles, { textFieldMarker } from './styles.stylex.mjs';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useInputEvents, useInputorEvents } from './hooks.mjs';
+import { useInputEvents } from './hooks.mjs';
 import { useIdentity, useControlledState, useFocus } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
@@ -14,7 +14,7 @@ import { CLASS_NAMES } from './context.mjs';
 import { $body } from '../theme/theme.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
-var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "onInputorClick", "label"];
+var _excluded = ["className", "style", "type", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label"];
 /**
  * @author murukal
  * @zh 输入组件
@@ -23,7 +23,10 @@ var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength
 var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
-    type = _ref.type,
+    type = _ref.type;
+    _ref.variant;
+    var _ref$shaped = _ref.shaped,
+    shaped = _ref$shaped === void 0 ? false : _ref$shaped,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     disabled = _ref.disabled,
@@ -35,17 +38,17 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onFocus = _ref.onFocus,
     leading = _ref.leading,
     trailing = _ref.trailing,
-    onInputorClick = _ref.onInputorClick,
     label = _ref.label,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputorRef = useRef(null);
   var inputRef = useRef(null);
   var classNames = useClassNames(CLASS_NAMES);
   var hasPlaceholder = !!inputProps.placeholder;
+  var hasLabel = !!label;
   var _useIdentity = useIdentity(),
     _useIdentity2 = _slicedToArray(_useIdentity, 1),
     id = _useIdentity2[0];
-  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", "on-surface-variant", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thin]]);
+  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", "surface-container-high", "on-surface-variant", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thin]]);
   // controlled value
   var _useControlledState = useControlledState(valueInProps, {
       defaultState: ""
@@ -86,11 +89,6 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: onClick,
     onFocus: onFocus
   });
-  // inputor events
-  var inputorEvents = useInputorEvents({
-    inputRef: inputRef,
-    onClick: disabled ? undefined : onInputorClick
-  });
   // is focused
   var _useFocus = useFocus({
       onBlur: inputEvents.blur,
@@ -105,16 +103,15 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     leading: props(styles.leading.base),
     trailing: props(styles.trailing.base),
     outline: props(styles.outline.base),
-    outlineLeading: props(styles.outlineLeading.base, disabled && styles.outlineLeading.disabled, invalid && styles.outlineLeading.invalid),
-    outlineNotch: props(styles.outlineNotch.base, $body.small, !!label && styles.outlineNotch.withLabel, hasPlaceholder && !!label && styles.outlineNotch.withLabelAndPlaceholder, disabled && styles.outlineNotch.disabled, invalid && styles.outlineNotch.invalid),
-    outlineTrailing: props(styles.outlineTrailing.base, disabled && styles.outlineTrailing.disabled, invalid && styles.outlineTrailing.invalid),
+    outlineLeading: props(styles.outlineLeading.base, disabled && styles.outlineLeading.disabled, invalid && styles.outlineLeading.invalid, shaped && styles.outlineLeading.shaped),
+    outlineNotch: props(styles.outlineNotch.base, $body.small, hasLabel && styles.outlineNotch.withLabel, hasLabel && hasPlaceholder && styles.outlineNotch.withLabelAndPlaceholder, disabled && styles.outlineNotch.disabled, invalid && styles.outlineNotch.invalid),
+    outlineTrailing: props(styles.outlineTrailing.base, disabled && styles.outlineTrailing.disabled, invalid && styles.outlineTrailing.invalid, shaped && styles.outlineTrailing.shaped),
     floatingLabel: props(styles.floatingLabel.base, hasPlaceholder && styles.floatingLabel.placeholder, disabled && styles.floatingLabel.disabled, invalid && styles.floatingLabel.invalid)
   };
   return /*#__PURE__*/React.createElement("div", _objectSpread({
     ref: inputorRef,
     className: stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className, styled.root.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.root.style), style), _themeColorVars),
-    onClick: inputorEvents.click
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.root.style), style), _themeColorVars)
   }, !disabled && {
     tabIndex: -1
   }), !!leading && (/*#__PURE__*/React.createElement("div", {
@@ -141,10 +138,10 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.outlineNotch, styled.outlineNotch.className),
     style: styled.outlineNotch.style
-  }, /*#__PURE__*/React.createElement("label", {
+  }, hasLabel && (/*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: stringify(styled.floatingLabel.className)
-  }, label)), /*#__PURE__*/React.createElement("div", {
+  }, label))), /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.outlineTrailing, styled.outlineTrailing.className),
     style: styled.outlineTrailing.style
   })), !!trailing && (/*#__PURE__*/React.createElement("div", {

package/dist/components/input/styles.stylex.cjs

@@ -113,6 +113,11 @@ var outlineLeading = {
     kVAM5u: "musaex-1ofxpqo",
     k6qhrQ: "musaex-7rzjjb",
     $$css: true
+  },
+  shaped: {
+    krdFHd: "musaex-16hqlox",
+    kVL7Gh: "musaex-e8lclw",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -142,6 +147,11 @@ var outlineTrailing = {
     kVAM5u: "musaex-1ofxpqo",
     k6qhrQ: "musaex-7rzjjb",
     $$css: true
+  },
+  shaped: {
+    kfmiAY: "musaex-ortkii",
+    kT0f0o: "musaex-1ogpvgu",
+    $$css: true
   }
 };
 var outlineNotch = {

package/dist/components/input/styles.stylex.d.ts

@@ -106,6 +106,10 @@ declare const styles: {
             }>;
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-error)">;
         }>;
+        readonly shaped: Readonly<{
+            readonly borderStartStartRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderStartStartRadius", string>;
+            readonly borderEndStartRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderEndStartRadius", string>;
+        }>;
     }>;
     outlineNotch: Readonly<{
         readonly base: Readonly<{
@@ -174,6 +178,10 @@ declare const styles: {
             }>;
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-error)">;
         }>;
+        readonly shaped: Readonly<{
+            readonly borderStartEndRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderStartEndRadius", string>;
+            readonly borderEndEndRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderEndEndRadius", string>;
+        }>;
     }>;
     floatingLabel: Readonly<{
         readonly base: Readonly<{

package/dist/components/input/styles.stylex.mjs

@@ -109,6 +109,11 @@ var outlineLeading = {
     kVAM5u: "musaex-1ofxpqo",
     k6qhrQ: "musaex-7rzjjb",
     $$css: true
+  },
+  shaped: {
+    krdFHd: "musaex-16hqlox",
+    kVL7Gh: "musaex-e8lclw",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -138,6 +143,11 @@ var outlineTrailing = {
     kVAM5u: "musaex-1ofxpqo",
     k6qhrQ: "musaex-7rzjjb",
     $$css: true
+  },
+  shaped: {
+    kfmiAY: "musaex-ortkii",
+    kT0f0o: "musaex-1ogpvgu",
+    $$css: true
   }
 };
 var outlineNotch = {

package/dist/components/password-input/__test__/password-input.test.d.ts

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

package/dist/components/password-input/password-input.cjs

@@ -39,6 +39,7 @@ var PasswordInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     type: isVisible ? "text" : "password",
     trailing: /*#__PURE__*/React.createElement(isVisible ? visibilityOff.default : visibility.default, _objectSpread({
+      role: "button",
       onClick: toggle,
       onMouseDown: function onMouseDown(event) {
         return event.preventDefault();

package/dist/components/password-input/password-input.mjs

@@ -35,6 +35,7 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     type: isVisible ? "text" : "password",
     trailing: /*#__PURE__*/createElement(isVisible ? IconVisibilityOff : IconVisibility, _objectSpread({
+      role: "button",
       onClick: toggle,
       onMouseDown: function onMouseDown(event) {
         return event.preventDefault();

package/dist/components/portal/__test__/portal.test.d.ts

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

package/dist/components/search/__test__/hooks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/search/__test__/style-contract.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/search/bar.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+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 styles = require('./styles.cjs');
+var close = require('../icon/icons/navigation/close.cjs');
+
+var SearchBar = function SearchBar(_ref) {
+  var clearable = _ref.clearable,
+    disabled = _ref.disabled,
+    leading = _ref.leading,
+    placeholder = _ref.placeholder,
+    searchButton = _ref.searchButton,
+    trailing = _ref.trailing,
+    inputRef = _ref.inputRef,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    onClear = _ref.onClear,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    onSearch = _ref.onSearch;
+  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),
+    searchButton: stylex.props(styles.default.searchButton.base)
+  };
+  var clearAction = hasValue && clearable && !disabled && (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: className.stringify(classNames.searchClear, styled.clear.className),
+    style: styled.clear.style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onClear();
+    },
+    "aria-label": "Clear search"
+  }, /*#__PURE__*/React.createElement(close.default, {
+    size: 24
+  })));
+  var searchButtonAction = searchButton && (/*#__PURE__*/React.createElement(button.Button, {
+    className: className.stringify(classNames.searchButton, styled.searchButton.className),
+    style: styled.searchButton.style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onSearch();
+    },
+    disabled: disabled
+  }, 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,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    leading: /*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchLeading, styled.leading.className),
+      style: styled.leading.style
+    }, leading !== null && leading !== void 0 ? leading : /*#__PURE__*/React.createElement(search.default, {
+      size: 24
+    })),
+    trailing: hasTrailing ? (/*#__PURE__*/React.createElement("span", {
+      className: className.stringify(classNames.searchTrailing, styled.trailing.className),
+      style: styled.trailing.style
+    }, clearAction, trailing, searchButtonAction)) : undefined
+  });
+};
+
+exports.default = SearchBar;

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

@@ -0,0 +1,19 @@
+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>;
+    value: string;
+    onChange: (value: string) => void;
+    onClear: () => void;
+    onFocus: FocusEventHandler<HTMLInputElement>;
+    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onSearch: () => void;
+};
+declare const SearchBar: ({ clearable, disabled, leading, placeholder, searchButton, trailing, inputRef, value, onChange, onClear, onFocus, onKeyDown, onSearch, }: SearchBarProps) => React.JSX.Element;
+export default SearchBar;

package/dist/components/search/bar.mjs

@@ -0,0 +1,83 @@
+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 styles from './styles.mjs';
+import IconClose from '../icon/icons/navigation/close.mjs';
+
+var SearchBar = function SearchBar(_ref) {
+  var clearable = _ref.clearable,
+    disabled = _ref.disabled,
+    leading = _ref.leading,
+    placeholder = _ref.placeholder,
+    searchButton = _ref.searchButton,
+    trailing = _ref.trailing,
+    inputRef = _ref.inputRef,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    onClear = _ref.onClear,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    onSearch = _ref.onSearch;
+  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),
+    searchButton: props(styles.searchButton.base)
+  };
+  var clearAction = hasValue && clearable && !disabled && (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: stringify(classNames.searchClear, styled.clear.className),
+    style: styled.clear.style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onClear();
+    },
+    "aria-label": "Clear search"
+  }, /*#__PURE__*/React.createElement(IconClose, {
+    size: 24
+  })));
+  var searchButtonAction = searchButton && (/*#__PURE__*/React.createElement(Button, {
+    className: stringify(classNames.searchButton, styled.searchButton.className),
+    style: styled.searchButton.style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onSearch();
+    },
+    disabled: disabled
+  }, 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,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    leading: /*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchLeading, styled.leading.className),
+      style: styled.leading.style
+    }, leading !== null && leading !== void 0 ? leading : /*#__PURE__*/React.createElement(IconSearch, {
+      size: 24
+    })),
+    trailing: hasTrailing ? (/*#__PURE__*/React.createElement("span", {
+      className: stringify(classNames.searchTrailing, styled.trailing.className),
+      style: styled.trailing.style
+    }, clearAction, trailing, searchButtonAction)) : undefined
+  });
+};
+
+export { SearchBar as default };