musae 1.3.1-beta.4 → 1.3.1-beta.6

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, {
@@ -100,13 +104,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isFocused = _useFocus2[0],
     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),
+    root: stylex.props(theme.$body.medium, styles_stylex.default.root.base, disabled && styles_stylex.default.root.disabled, !disabled && styles_stylex.textFieldMarker),
+    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),
-    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)
+    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),
+    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,
@@ -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, {
@@ -96,13 +100,15 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isFocused = _useFocus2[0],
     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),
+    root: props($body.medium, styles.root.base, disabled && styles.root.disabled, !disabled && textFieldMarker),
+    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),
-    outlineTrailing: props(styles.outlineTrailing.base, disabled && styles.outlineTrailing.disabled),
-    floatingLabel: props(styles.floatingLabel.base, hasPlaceholder && styles.floatingLabel.placeholder, disabled && styles.floatingLabel.disabled)
+    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),
+    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,
@@ -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,12 +21,7 @@ var root = {
     kB7OPa: "musaex-9f619",
     kogj98: "musaex-q3gua8",
     k8WAf4: "musaex-11owsmz",
-    kg3NbH: "musaex-81lxrv",
-    $$css: true
-  },
-  invalid: {
-    kGVxlE: "musaex-4ms1xy",
-    knuKkz: null,
+    kg3NbH: "musaex-2961ne",
     $$css: true
   },
   disabled: {
@@ -38,13 +33,23 @@ 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",
     k7Eaqz: "musaex-1rdiejn",
     kZKoxP: "musaex-kyvkcq",
     kUk6DE: "musaex-98rzlu",
+    k8Qsv1: "musaex-19r3k9r",
+    $$css: true
+  },
+  hasLeading: {
+    kZCmMZ: "musaex-t0f09o",
+    $$css: true
+  },
+  hasTrailing: {
+    kwRFfy: "musaex-1kav6dm",
     $$css: true
   },
   disabled: {
@@ -52,6 +57,26 @@ var input = {
     $$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",
@@ -83,6 +108,11 @@ var outlineLeading = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -107,6 +137,11 @@ var outlineTrailing = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineNotch = {
@@ -123,18 +158,27 @@ var outlineNotch = {
     kVAM5u: "musaex-1t7i6ks",
     kjGldf: "musaex-aafj1c",
     kLoX6v: "musaex-kap2c3",
-    k9zEiM: "musaex-1wg96mr",
+    kVixrW: "musaex-hkrz9u",
     k6qhrQ: "musaex-48fzr0",
+    $$css: true
+  },
+  withLabel: {
+    k3lJl8: "musaex-14zl4sw",
     kRj6wj: "musaex-1bq66p9",
     $$css: true
   },
-  placeholder: {
+  withLabelAndPlaceholder: {
     kLZC3w: "musaex-1v8p93f",
     $$css: true
   },
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var floatingLabel = {
@@ -156,6 +200,11 @@ var floatingLabel = {
     k3aq6I: "musaex-3oybdh",
     $$css: true
   },
+  invalid: {
+    kMwMTN: "musaex-jt36v0",
+    kan248: "musaex-19uxsja",
+    $$css: true
+  },
   disabled: {
     kMwMTN: "musaex-1ldep6k",
     $$css: true
@@ -164,6 +213,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

@@ -19,12 +19,6 @@ declare const styles: {
             readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
             readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
         }>;
-        readonly invalid: Readonly<{
-            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", `0px 0px 0px ${import("@stylexjs/stylex").StyleXVar<string>} var(--color-error) inset`>;
-            readonly ":focus-within": import("@stylexjs/stylex").StyleXClassNameFor<":focus-within", {
-                readonly boxShadow: null;
-            }>;
-        }>;
         readonly disabled: Readonly<{
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-opacity-38)">;
         }>;
@@ -33,13 +27,23 @@ 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>;
             readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
             readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
+            readonly "::placeholder": import("@stylexjs/stylex").StyleXClassNameFor<"::placeholder", {
+                readonly color: "var(--color-on-surface-variant)";
+            }>;
+        }>;
+        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", {
@@ -47,6 +51,24 @@ declare const styles: {
             }>;
         }>;
     }>;
+    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">;
@@ -78,13 +100,18 @@ declare const styles: {
         readonly disabled: Readonly<{
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-on-surface-opacity-12)">;
         }>;
+        readonly invalid: Readonly<{
+            readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, "var(--color-error)" | {
+                readonly borderColor: "var(--color-error)";
+            }>;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-error)">;
+        }>;
     }>;
     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,12 +126,24 @@ declare const styles: {
             readonly borderInlineWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderInlineWidth", string>;
             readonly borderBlockWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockWidth", string>;
         }>;
-        readonly placeholder: Readonly<{
+        readonly withLabel: Readonly<{
+            readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, {
+                readonly borderBlockStartWidth: import("@stylexjs/stylex").StyleXVar<string>;
+                readonly borderBlockStartColor: "transparent";
+            }>;
+        }>;
+        readonly withLabelAndPlaceholder: Readonly<{
             readonly borderBlockStartColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockStartColor", "transparent">;
         }>;
         readonly disabled: Readonly<{
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-on-surface-opacity-12)">;
         }>;
+        readonly invalid: Readonly<{
+            readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, "var(--color-error)" | {
+                readonly borderColor: "var(--color-error)";
+            }>;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-error)">;
+        }>;
     }>;
     outlineTrailing: Readonly<{
         readonly base: Readonly<{
@@ -129,6 +168,12 @@ declare const styles: {
         readonly disabled: Readonly<{
             readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-on-surface-opacity-12)">;
         }>;
+        readonly invalid: Readonly<{
+            readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, "var(--color-error)" | {
+                readonly borderColor: "var(--color-error)";
+            }>;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-error)">;
+        }>;
     }>;
     floatingLabel: Readonly<{
         readonly base: Readonly<{
@@ -149,6 +194,12 @@ declare const styles: {
             readonly top: import("@stylexjs/stylex").StyleXClassNameFor<"top", "-50%">;
             readonly transform: import("@stylexjs/stylex").StyleXClassNameFor<"transform", "scale(1)">;
         }>;
+        readonly invalid: Readonly<{
+            readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, "var(--color-error)" | {
+                readonly color: "var(--color-error)";
+            }>;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-error)">;
+        }>;
         readonly disabled: Readonly<{
             readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-opacity-38)">;
         }>;

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

@@ -17,12 +17,7 @@ var root = {
     kB7OPa: "musaex-9f619",
     kogj98: "musaex-q3gua8",
     k8WAf4: "musaex-11owsmz",
-    kg3NbH: "musaex-81lxrv",
-    $$css: true
-  },
-  invalid: {
-    kGVxlE: "musaex-4ms1xy",
-    knuKkz: null,
+    kg3NbH: "musaex-2961ne",
     $$css: true
   },
   disabled: {
@@ -34,13 +29,23 @@ 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",
     k7Eaqz: "musaex-1rdiejn",
     kZKoxP: "musaex-kyvkcq",
     kUk6DE: "musaex-98rzlu",
+    k8Qsv1: "musaex-19r3k9r",
+    $$css: true
+  },
+  hasLeading: {
+    kZCmMZ: "musaex-t0f09o",
+    $$css: true
+  },
+  hasTrailing: {
+    kwRFfy: "musaex-1kav6dm",
     $$css: true
   },
   disabled: {
@@ -48,6 +53,26 @@ var input = {
     $$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",
@@ -79,6 +104,11 @@ var outlineLeading = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -103,6 +133,11 @@ var outlineTrailing = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineNotch = {
@@ -119,18 +154,27 @@ var outlineNotch = {
     kVAM5u: "musaex-1t7i6ks",
     kjGldf: "musaex-aafj1c",
     kLoX6v: "musaex-kap2c3",
-    k9zEiM: "musaex-1wg96mr",
+    kVixrW: "musaex-hkrz9u",
     k6qhrQ: "musaex-48fzr0",
+    $$css: true
+  },
+  withLabel: {
+    k3lJl8: "musaex-14zl4sw",
     kRj6wj: "musaex-1bq66p9",
     $$css: true
   },
-  placeholder: {
+  withLabelAndPlaceholder: {
     kLZC3w: "musaex-1v8p93f",
     $$css: true
   },
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var floatingLabel = {
@@ -152,6 +196,11 @@ var floatingLabel = {
     k3aq6I: "musaex-3oybdh",
     $$css: true
   },
+  invalid: {
+    kMwMTN: "musaex-jt36v0",
+    kan248: "musaex-19uxsja",
+    $$css: true
+  },
   disabled: {
     kMwMTN: "musaex-1ldep6k",
     $$css: true
@@ -160,6 +209,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;
   }
@@ -512,6 +516,10 @@
     transition: transform .3s;
   }
 
+  .musaex-7rzjjb.musaex-7rzjjb:where(.musaex-19ap9w9:focus-within *) {
+    border-color: var(--color-error);
+  }
+
   .musaex-48fzr0.musaex-48fzr0:where(.musaex-19ap9w9:focus-within *) {
     border-color: var(--color-primary);
   }
@@ -796,10 +804,6 @@
     border-start-start-radius: var(--musaex-17d148i);
   }
 
-  .musaex-4ms1xy {
-    box-shadow: 0 0 0 var(--musaex-1035pbm) var(--color-error) inset;
-  }
-
   .musaex-bxw2on {
     box-shadow: 0 0 0 var(--musaex-1xf102v) var(--color-on-primary);
   }
@@ -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;
   }
@@ -1821,6 +1841,10 @@
     border-inline-start-width: var(--musaex-1035pbm);
   }
 
+  .musaex-19uxsja.musaex-19uxsja:where(.musaex-19ap9w9:focus-within *) {
+    color: var(--color-error);
+  }
+
   .musaex-1lxvvmp.musaex-1lxvvmp:where(.musaex-19ap9w9:focus-within *) {
     color: var(--color-primary);
   }
@@ -2661,14 +2685,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%;
   }
@@ -2863,6 +2887,10 @@
     color: var(--color-on-surface-opacity-38);
   }
 
+  .musaex-19r3k9r::placeholder {
+    color: var(--color-on-surface-variant);
+  }
+
   .musaex-100rkj9:after, .musaex-10tli2e:before, .musaex-1cpjm7i:before, .musaex-1s928wv:after {
     content: "";
   }

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.6",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",