musae 1.3.1-beta.12 → 1.3.1-beta.14

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", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label"];
+var _excluded = ["className", "style", "type", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label", "inputClassName"];
 /**
  * @author murukal
  * @zh 输入组件
@@ -43,6 +43,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     leading = _ref.leading,
     trailing = _ref.trailing,
     label = _ref.label,
+    inputClassName = _ref.inputClassName,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputorRef = React.useRef(null);
   var inputRef = React.useRef(null);
@@ -108,23 +109,30 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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, 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),
+    outlineNotch: stylex.props(styles_stylex.default.outlineNotch.base, theme.$body.small, hasLabel && styles_stylex.default.outlineNotch.withLabel, hasLabel && (hasPlaceholder || !!_value) && 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)
+    floatingLabel: stylex.props(styles_stylex.default.floatingLabel.base, (hasPlaceholder || !!_value) && styles_stylex.default.floatingLabel.placeholder, disabled && styles_stylex.default.floatingLabel.disabled, invalid && styles_stylex.default.floatingLabel.invalid)
   };
-  return /*#__PURE__*/React.createElement("div", _objectSpread({
+  return /*#__PURE__*/React.createElement("div", _objectSpread(_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)
   }, !disabled && {
     tabIndex: -1
+  }), {}, {
+    onFocus: function onFocus(event) {
+      if (event.target === event.currentTarget) {
+        var _inputRef$current5;
+        (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.focus();
+      }
+    }
   }), !!leading && (/*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.leading, styled.leading.className),
     style: styled.leading.style
   }, leading)), /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
     id: id,
     value: _value,
-    className: className.stringify(classNames.input, styled.input.className),
+    className: className.stringify(classNames.input, inputClassName, styled.input.className),
     style: styled.input.style,
     type: type,
     ref: inputRef,

package/dist/components/input/input.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", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label"];
+var _excluded = ["className", "style", "type", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label", "inputClassName"];
 /**
  * @author murukal
  * @zh 输入组件
@@ -39,6 +39,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     leading = _ref.leading,
     trailing = _ref.trailing,
     label = _ref.label,
+    inputClassName = _ref.inputClassName,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputorRef = useRef(null);
   var inputRef = useRef(null);
@@ -104,23 +105,30 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     trailing: props(styles.trailing.base),
     outline: props(styles.outline.base),
     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),
+    outlineNotch: props(styles.outlineNotch.base, $body.small, hasLabel && styles.outlineNotch.withLabel, hasLabel && (hasPlaceholder || !!_value) && 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)
+    floatingLabel: props(styles.floatingLabel.base, (hasPlaceholder || !!_value) && styles.floatingLabel.placeholder, disabled && styles.floatingLabel.disabled, invalid && styles.floatingLabel.invalid)
   };
-  return /*#__PURE__*/React.createElement("div", _objectSpread({
+  return /*#__PURE__*/React.createElement("div", _objectSpread(_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)
   }, !disabled && {
     tabIndex: -1
+  }), {}, {
+    onFocus: function onFocus(event) {
+      if (event.target === event.currentTarget) {
+        var _inputRef$current5;
+        (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.focus();
+      }
+    }
   }), !!leading && (/*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.leading, styled.leading.className),
     style: styled.leading.style
   }, leading)), /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
     id: id,
     value: _value,
-    className: stringify(classNames.input, styled.input.className),
+    className: stringify(classNames.input, inputClassName, styled.input.className),
     style: styled.input.style,
     type: type,
     ref: inputRef,

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

@@ -9,11 +9,11 @@ var styles = require('./styles.cjs');
 var React = require('react');
 var input = require('../input/input.cjs');
 var relax = require('@aiszlab/relax');
-var hooks = require('../theme/hooks.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.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 visibilityOff = require('../icon/icons/action/visibility-off.cjs');
 var visibility = require('../icon/icons/action/visibility.cjs');
 
@@ -25,19 +25,18 @@ var PasswordInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isVisible = _useBoolean2[0],
     toggle = _useBoolean2[1].toggle;
-  var theme = hooks.useTheme();
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["secondary-fixed-dim", "secondary"]);
   var styled = {
+    input: stylex.props(styles.default.input),
     visibility: stylex.props(styles.default.visibility)
   };
   return /*#__PURE__*/React.createElement(input.default, _objectSpread(_objectSpread({}, props), {}, {
     className: className.stringify(classNames.passwordInput, className$1),
-    style: {
-      "--color-secondary-fixed-dim": theme.colors["secondary-fixed-dim"],
-      "--color-secondary": theme.colors.secondary
-    },
+    style: themeColorVars,
     ref: ref,
     type: isVisible ? "text" : "password",
+    inputClassName: styled.input.className,
     trailing: /*#__PURE__*/React.createElement(isVisible ? visibilityOff.default : visibility.default, _objectSpread({
       role: "button",
       onClick: toggle,

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

@@ -5,11 +5,11 @@ import styles from './styles.mjs';
 import React, { forwardRef, createElement } from 'react';
 import Input from '../input/input.mjs';
 import { useBoolean } from '@aiszlab/relax';
-import { useTheme } from '../theme/hooks.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { CLASS_NAMES } from './context.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 IconVisibilityOff from '../icon/icons/action/visibility-off.mjs';
 import IconVisibility from '../icon/icons/action/visibility.mjs';
 
@@ -21,19 +21,18 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isVisible = _useBoolean2[0],
     toggle = _useBoolean2[1].toggle;
-  var theme = useTheme();
   var classNames = useClassNames(CLASS_NAMES);
+  var themeColorVars = useThemeColorVars(["secondary-fixed-dim", "secondary"]);
   var styled = {
+    input: props(styles.input),
     visibility: props(styles.visibility)
   };
   return /*#__PURE__*/React.createElement(Input, _objectSpread(_objectSpread({}, props$1), {}, {
     className: stringify(classNames.passwordInput, className),
-    style: {
-      "--color-secondary-fixed-dim": theme.colors["secondary-fixed-dim"],
-      "--color-secondary": theme.colors.secondary
-    },
+    style: themeColorVars,
     ref: ref,
     type: isVisible ? "text" : "password",
+    inputClassName: styled.input.className,
     trailing: /*#__PURE__*/createElement(isVisible ? IconVisibilityOff : IconVisibility, _objectSpread({
       role: "button",
       onClick: toggle,

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

@@ -3,6 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styles = {
+  input: {
+    k3Osrj: "musaex-10emqs4",
+    $$css: true
+  },
   visibility: {
     kMwMTN: "musaex-kmi68j",
     k6sLGO: "musaex-xnarah",

package/dist/components/password-input/styles.d.ts

@@ -1,4 +1,9 @@
 declare const styles: Readonly<{
+    readonly input: Readonly<{
+        readonly "::-ms-reveal": import("@stylexjs/stylex").StyleXClassNameFor<"::-ms-reveal", {
+            readonly display: "none";
+        }>;
+    }>;
     readonly visibility: Readonly<{
         readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-secondary-fixed-dim)">;
         readonly willChange: import("@stylexjs/stylex").StyleXClassNameFor<"willChange", "color">;

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

@@ -1,4 +1,8 @@
 var styles = {
+  input: {
+    k3Osrj: "musaex-10emqs4",
+    $$css: true
+  },
   visibility: {
     kMwMTN: "musaex-kmi68j",
     k6sLGO: "musaex-xnarah",

package/dist/styles.css

@@ -2889,6 +2889,10 @@
     display: block;
   }
 
+  .musaex-10emqs4::-ms-reveal {
+    display: none;
+  }
+
   .musaex-15ozc13:before {
     display: none;
   }

package/dist/types/input.d.ts

@@ -33,6 +33,11 @@ export interface InputProps extends Pick<InputHTMLAttributes<HTMLInputElement>,
      * @default false
      */
     shaped?: boolean;
+    /**
+     * @zh 输入元素的附加类名
+     * @en Additional class name for the input element
+     */
+    inputClassName?: string;
     /**
      * @zh 前置节点
      * @en Leading node

package/package.json

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