musae 1.3.1-beta.4 → 1.3.1-beta.5

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

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

package/dist/components/input/context.cjs

@@ -7,6 +7,8 @@
 var CLASS_NAMES = {
   inputor: "input__inputor",
   input: "input",
+  leading: "input__leading",
+  trailing: "input__trailing",
   focused: "input__inputor--focused",
   invalid: "input__inputor--invalid",
   outline: "notched-outline",

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

@@ -5,6 +5,8 @@
 export declare const CLASS_NAMES: {
     inputor: string;
     input: string;
+    leading: string;
+    trailing: string;
     focused: string;
     invalid: string;
     outline: string;

package/dist/components/input/context.mjs

@@ -5,6 +5,8 @@
 var CLASS_NAMES = {
   inputor: "input__inputor",
   input: "input",
+  leading: "input__leading",
+  trailing: "input__trailing",
   focused: "input__inputor--focused",
   invalid: "input__inputor--invalid",
   outline: "notched-outline",

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"];
+var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "onInputorClick", "label"];
 /**
  * @author murukal
  * @zh 输入组件
@@ -40,11 +40,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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 _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]]);
   // controlled value
   var _useControlledState = relax.useControlledState(valueInProps, {
@@ -101,10 +105,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     focusProps = _useFocus2[1];
   var styled = {
     root: stylex.props(theme.$body.medium, styles_stylex.default.root.base, invalid && styles_stylex.default.root.invalid, disabled && styles_stylex.default.root.disabled, !disabled && styles_stylex.textFieldMarker),
-    input: stylex.props(styles_stylex.default.input.base, disabled && styles_stylex.default.input.disabled),
+    input: stylex.props(styles_stylex.default.input.base, !!leading && styles_stylex.default.input.hasLeading, !!trailing && styles_stylex.default.input.hasTrailing, disabled && styles_stylex.default.input.disabled),
+    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),
-    outlineNotch: stylex.props(styles_stylex.default.outlineNotch.base, hasPlaceholder && styles_stylex.default.outlineNotch.placeholder, theme.$body.small, disabled && styles_stylex.default.outlineNotch.disabled),
+    outlineNotch: stylex.props(styles_stylex.default.outlineNotch.base, theme.$body.small, disabled && styles_stylex.default.outlineNotch.disabled, !!label && styles_stylex.default.outlineNotch.labeled, hasPlaceholder && !!label && styles_stylex.default.outlineNotch.labeledAndHasPlaceholder),
     outlineTrailing: stylex.props(styles_stylex.default.outlineTrailing.base, disabled && styles_stylex.default.outlineTrailing.disabled),
     floatingLabel: stylex.props(styles_stylex.default.floatingLabel.base, hasPlaceholder && styles_stylex.default.floatingLabel.placeholder, disabled && styles_stylex.default.floatingLabel.disabled)
   };
@@ -115,7 +121,11 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: inputorEvents.click
   }, !disabled && {
     tabIndex: -1
-  }), leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+  }), !!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),
     style: styled.input.style,
@@ -136,12 +146,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className.stringify(classNames.outlineNotch, styled.outlineNotch.className),
     style: styled.outlineNotch.style
   }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: "text-field-hero-input",
+    htmlFor: id,
     className: className.stringify(styled.floatingLabel.className)
-  }, "Name")), /*#__PURE__*/React.createElement("div", {
+  }, label)), /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.outlineTrailing, styled.outlineTrailing.className),
     style: styled.outlineTrailing.style
-  })), trailing);
+  })), !!trailing && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.trailing, styled.trailing.className),
+    style: styled.trailing.style
+  }, trailing)));
 });
 
 exports.default = Input;

package/dist/components/input/input.mjs

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import styles, { textFieldMarker } from './styles.stylex.mjs';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputEvents, useInputorEvents } from './hooks.mjs';
-import { useControlledState, useFocus } from '@aiszlab/relax';
+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';
 import { useClassNames } from '../../hooks/use-class-names.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"];
+var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "onInputorClick", "label"];
 /**
  * @author murukal
  * @zh 输入组件
@@ -36,11 +36,15 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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 _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]]);
   // controlled value
   var _useControlledState = useControlledState(valueInProps, {
@@ -97,10 +101,12 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focusProps = _useFocus2[1];
   var styled = {
     root: props($body.medium, styles.root.base, invalid && styles.root.invalid, disabled && styles.root.disabled, !disabled && textFieldMarker),
-    input: props(styles.input.base, disabled && styles.input.disabled),
+    input: props(styles.input.base, !!leading && styles.input.hasLeading, !!trailing && styles.input.hasTrailing, disabled && styles.input.disabled),
+    leading: props(styles.leading.base),
+    trailing: props(styles.trailing.base),
     outline: props(styles.outline.base),
     outlineLeading: props(styles.outlineLeading.base, disabled && styles.outlineLeading.disabled),
-    outlineNotch: props(styles.outlineNotch.base, hasPlaceholder && styles.outlineNotch.placeholder, $body.small, disabled && styles.outlineNotch.disabled),
+    outlineNotch: props(styles.outlineNotch.base, $body.small, disabled && styles.outlineNotch.disabled, !!label && styles.outlineNotch.labeled, hasPlaceholder && !!label && styles.outlineNotch.labeledAndHasPlaceholder),
     outlineTrailing: props(styles.outlineTrailing.base, disabled && styles.outlineTrailing.disabled),
     floatingLabel: props(styles.floatingLabel.base, hasPlaceholder && styles.floatingLabel.placeholder, disabled && styles.floatingLabel.disabled)
   };
@@ -111,7 +117,11 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: inputorEvents.click
   }, !disabled && {
     tabIndex: -1
-  }), leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+  }), !!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),
     style: styled.input.style,
@@ -132,12 +142,15 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: stringify(classNames.outlineNotch, styled.outlineNotch.className),
     style: styled.outlineNotch.style
   }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: "text-field-hero-input",
+    htmlFor: id,
     className: stringify(styled.floatingLabel.className)
-  }, "Name")), /*#__PURE__*/React.createElement("div", {
+  }, label)), /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.outlineTrailing, styled.outlineTrailing.className),
     style: styled.outlineTrailing.style
-  })), trailing);
+  })), !!trailing && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.trailing, styled.trailing.className),
+    style: styled.trailing.style
+  }, trailing)));
 });
 
 export { Input as default };

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

@@ -21,7 +21,7 @@ var root = {
     kB7OPa: "musaex-9f619",
     kogj98: "musaex-q3gua8",
     k8WAf4: "musaex-11owsmz",
-    kg3NbH: "musaex-81lxrv",
+    kg3NbH: "musaex-2961ne",
     $$css: true
   },
   invalid: {
@@ -38,7 +38,8 @@ var input = {
   base: {
     kLWn49: "musaex-15bjb6t",
     kGuDYH: "musaex-1qlqyl8",
-    kmVPX3: "musaex-1n775ky",
+    k8WAf4: "musaex-6yerk0",
+    kg3NbH: "musaex-1v4gb6w",
     kMzoRj: "musaex-k59kd",
     kWkggS: "musaex-jbqb8w",
     kI3sdo: "musaex-4fx59i",
@@ -47,11 +48,39 @@ var input = {
     kUk6DE: "musaex-98rzlu",
     $$css: true
   },
+  hasLeading: {
+    kZCmMZ: "musaex-t0f09o",
+    $$css: true
+  },
+  hasTrailing: {
+    kwRFfy: "musaex-1kav6dm",
+    $$css: true
+  },
   disabled: {
     k8Qsv1: "musaex-1tfpmi6",
     $$css: true
   }
 };
+var leading = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kYYq5F: "musaex-vg9ial",
+    kLqNvP: "musaex-82zlsq",
+    k1xSpc: "musaex-3nfvp2",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  }
+};
+var trailing = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kYYq5F: "musaex-vg9ial",
+    kt4wiu: "musaex-1swhz51",
+    k1xSpc: "musaex-3nfvp2",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  }
+};
 var outline = {
   base: {
     kVAEAm: "musaex-10l6tqk",
@@ -123,12 +152,16 @@ var outlineNotch = {
     kVAM5u: "musaex-1t7i6ks",
     kjGldf: "musaex-aafj1c",
     kLoX6v: "musaex-kap2c3",
-    k9zEiM: "musaex-1wg96mr",
+    kVixrW: "musaex-hkrz9u",
     k6qhrQ: "musaex-48fzr0",
+    $$css: true
+  },
+  labeled: {
+    k3lJl8: "musaex-14zl4sw",
     kRj6wj: "musaex-1bq66p9",
     $$css: true
   },
-  placeholder: {
+  labeledAndHasPlaceholder: {
     kLZC3w: "musaex-1v8p93f",
     $$css: true
   },
@@ -164,6 +197,8 @@ var floatingLabel = {
 var styles = {
   root: root,
   input: input,
+  leading: leading,
+  trailing: trailing,
   outline: outline,
   outlineLeading: outlineLeading,
   outlineNotch: outlineNotch,

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

@@ -33,7 +33,8 @@ declare const styles: {
         readonly base: Readonly<{
             readonly lineHeight: import("@stylexjs/stylex").StyleXClassNameFor<"lineHeight", "inherit">;
             readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "inherit">;
-            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
             readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
             readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "transparent">;
             readonly outline: import("@stylexjs/stylex").StyleXClassNameFor<"outline", string>;
@@ -41,12 +42,36 @@ declare const styles: {
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
             readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
         }>;
+        readonly hasLeading: Readonly<{
+            readonly paddingInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineStart", string>;
+        }>;
+        readonly hasTrailing: Readonly<{
+            readonly paddingInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInlineEnd", string>;
+        }>;
         readonly disabled: Readonly<{
             readonly "::placeholder": import("@stylexjs/stylex").StyleXClassNameFor<"::placeholder", {
                 readonly color: "var(--color-on-surface-opacity-38)";
             }>;
         }>;
     }>;
+    leading: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly insetBlock: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlock", string>;
+            readonly insetInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineStart", string>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        }>;
+    }>;
+    trailing: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly insetBlock: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlock", string>;
+            readonly insetInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineEnd", string>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        }>;
+    }>;
     outline: Readonly<{
         readonly base: Readonly<{
             readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
@@ -82,9 +107,8 @@ declare const styles: {
     outlineNotch: Readonly<{
         readonly base: Readonly<{
             readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, string | {
-                readonly borderBlockEndWidth: import("@stylexjs/stylex").StyleXVar<string>;
+                readonly borderBlockWidth: import("@stylexjs/stylex").StyleXVar<string>;
                 readonly borderColor: "var(--color-primary)";
-                readonly borderBlockStartColor: "transparent";
             }>;
             readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
@@ -99,7 +123,13 @@ declare const styles: {
             readonly borderInlineWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderInlineWidth", string>;
             readonly borderBlockWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockWidth", string>;
         }>;
-        readonly placeholder: Readonly<{
+        readonly labeled: Readonly<{
+            readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, {
+                readonly borderBlockStartWidth: import("@stylexjs/stylex").StyleXVar<string>;
+                readonly borderBlockStartColor: "transparent";
+            }>;
+        }>;
+        readonly labeledAndHasPlaceholder: Readonly<{
             readonly borderBlockStartColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockStartColor", "transparent">;
         }>;
         readonly disabled: Readonly<{

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

@@ -17,7 +17,7 @@ var root = {
     kB7OPa: "musaex-9f619",
     kogj98: "musaex-q3gua8",
     k8WAf4: "musaex-11owsmz",
-    kg3NbH: "musaex-81lxrv",
+    kg3NbH: "musaex-2961ne",
     $$css: true
   },
   invalid: {
@@ -34,7 +34,8 @@ var input = {
   base: {
     kLWn49: "musaex-15bjb6t",
     kGuDYH: "musaex-1qlqyl8",
-    kmVPX3: "musaex-1n775ky",
+    k8WAf4: "musaex-6yerk0",
+    kg3NbH: "musaex-1v4gb6w",
     kMzoRj: "musaex-k59kd",
     kWkggS: "musaex-jbqb8w",
     kI3sdo: "musaex-4fx59i",
@@ -43,11 +44,39 @@ var input = {
     kUk6DE: "musaex-98rzlu",
     $$css: true
   },
+  hasLeading: {
+    kZCmMZ: "musaex-t0f09o",
+    $$css: true
+  },
+  hasTrailing: {
+    kwRFfy: "musaex-1kav6dm",
+    $$css: true
+  },
   disabled: {
     k8Qsv1: "musaex-1tfpmi6",
     $$css: true
   }
 };
+var leading = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kYYq5F: "musaex-vg9ial",
+    kLqNvP: "musaex-82zlsq",
+    k1xSpc: "musaex-3nfvp2",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  }
+};
+var trailing = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kYYq5F: "musaex-vg9ial",
+    kt4wiu: "musaex-1swhz51",
+    k1xSpc: "musaex-3nfvp2",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  }
+};
 var outline = {
   base: {
     kVAEAm: "musaex-10l6tqk",
@@ -119,12 +148,16 @@ var outlineNotch = {
     kVAM5u: "musaex-1t7i6ks",
     kjGldf: "musaex-aafj1c",
     kLoX6v: "musaex-kap2c3",
-    k9zEiM: "musaex-1wg96mr",
+    kVixrW: "musaex-hkrz9u",
     k6qhrQ: "musaex-48fzr0",
+    $$css: true
+  },
+  labeled: {
+    k3lJl8: "musaex-14zl4sw",
     kRj6wj: "musaex-1bq66p9",
     $$css: true
   },
-  placeholder: {
+  labeledAndHasPlaceholder: {
     kLZC3w: "musaex-1v8p93f",
     $$css: true
   },
@@ -160,6 +193,8 @@ var floatingLabel = {
 var styles = {
   root: root,
   input: input,
+  leading: leading,
+  trailing: trailing,
   outline: outline,
   outlineLeading: outlineLeading,
   outlineNotch: outlineNotch,

package/dist/styles.css

@@ -352,6 +352,10 @@
     grid-template-areas: var(--layout);
   }
 
+  .musaex-vg9ial {
+    inset-block: var(--musaex-1fxazvh);
+  }
+
   .musaex-17y0mx6 {
     inset-inline: 0;
   }
@@ -1172,6 +1176,10 @@
     inset-inline-end: 0;
   }
 
+  .musaex-1swhz51 {
+    inset-inline-end: var(--musaex-14eq97i);
+  }
+
   .musaex-1aovfyv {
     inset-inline-end: var(--musaex-1bvtfky);
   }
@@ -1192,6 +1200,10 @@
     inset-inline-start: var(--musaex-12cvltn);
   }
 
+  .musaex-82zlsq {
+    inset-inline-start: var(--musaex-14eq97i);
+  }
+
   .musaex-lrh9k8 {
     inset-inline-start: var(--musaex-1ninzqv);
   }
@@ -1432,6 +1444,10 @@
     padding-inline-end: var(--musaex-1vpnstl);
   }
 
+  .musaex-1kav6dm {
+    padding-inline-end: var(--musaex-mk8wyj);
+  }
+
   .musaex-1sznsej {
     padding-inline-start: calc(var(--depth) * var(--musaex-14eq97i));
   }
@@ -1460,6 +1476,10 @@
     padding-inline-start: var(--musaex-1vpnstl);
   }
 
+  .musaex-t0f09o {
+    padding-inline-start: var(--musaex-mk8wyj);
+  }
+
   .musaex-67bb7w {
     pointer-events: auto;
   }
@@ -2661,14 +2681,14 @@
     width: var(--width);
   }
 
-  .musaex-1wg96mr.musaex-1wg96mr:where(.musaex-19ap9w9:focus-within *) {
-    border-bottom-width: var(--musaex-1035pbm);
-  }
-
   .musaex-1bq66p9.musaex-1bq66p9:where(.musaex-19ap9w9:focus-within *) {
     border-top-color: #0000;
   }
 
+  .musaex-14zl4sw.musaex-14zl4sw:where(.musaex-19ap9w9:focus-within *) {
+    border-top-width: var(--musaex-1xf102v);
+  }
+
   .musaex-1skm1u1.musaex-1skm1u1:where(.musaex-19ap9w9:focus-within *) {
     top: -50%;
   }

package/dist/types/input.d.ts

@@ -64,6 +64,7 @@ export interface InputProps extends Pick<InputHTMLAttributes<HTMLInputElement>,
      * @default void 0
      */
     onChange?: (value: string) => void;
+    label?: string;
 }
 /**
  * @zh 输入组件引用

package/package.json

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