musae 1.3.1-beta.5 → 1.3.1-beta.6

package/dist/components/input/input.cjs

@@ -104,15 +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),
+    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, 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)
+    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,

package/dist/components/input/input.mjs

@@ -100,15 +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),
+    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, $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)
+    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,

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

@@ -24,11 +24,6 @@ var root = {
     kg3NbH: "musaex-2961ne",
     $$css: true
   },
-  invalid: {
-    kGVxlE: "musaex-4ms1xy",
-    knuKkz: null,
-    $$css: true
-  },
   disabled: {
     kMwMTN: "musaex-1ldep6k",
     $$css: true
@@ -46,6 +41,7 @@ var input = {
     k7Eaqz: "musaex-1rdiejn",
     kZKoxP: "musaex-kyvkcq",
     kUk6DE: "musaex-98rzlu",
+    k8Qsv1: "musaex-19r3k9r",
     $$css: true
   },
   hasLeading: {
@@ -112,6 +108,11 @@ var outlineLeading = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -136,6 +137,11 @@ var outlineTrailing = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineNotch = {
@@ -156,18 +162,23 @@ var outlineNotch = {
     k6qhrQ: "musaex-48fzr0",
     $$css: true
   },
-  labeled: {
+  withLabel: {
     k3lJl8: "musaex-14zl4sw",
     kRj6wj: "musaex-1bq66p9",
     $$css: true
   },
-  labeledAndHasPlaceholder: {
+  withLabelAndPlaceholder: {
     kLZC3w: "musaex-1v8p93f",
     $$css: true
   },
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var floatingLabel = {
@@ -189,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

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)">;
         }>;
@@ -41,6 +35,9 @@ declare const styles: {
             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>;
@@ -103,6 +100,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)">;
+        }>;
     }>;
     outlineNotch: Readonly<{
         readonly base: Readonly<{
@@ -123,18 +126,24 @@ declare const styles: {
             readonly borderInlineWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderInlineWidth", string>;
             readonly borderBlockWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderBlockWidth", string>;
         }>;
-        readonly labeled: Readonly<{
+        readonly withLabel: Readonly<{
             readonly [x: string]: import("@stylexjs/stylex").StyleXClassNameFor<string, {
                 readonly borderBlockStartWidth: import("@stylexjs/stylex").StyleXVar<string>;
                 readonly borderBlockStartColor: "transparent";
             }>;
         }>;
-        readonly labeledAndHasPlaceholder: Readonly<{
+        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<{
@@ -159,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<{
@@ -179,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

@@ -20,11 +20,6 @@ var root = {
     kg3NbH: "musaex-2961ne",
     $$css: true
   },
-  invalid: {
-    kGVxlE: "musaex-4ms1xy",
-    knuKkz: null,
-    $$css: true
-  },
   disabled: {
     kMwMTN: "musaex-1ldep6k",
     $$css: true
@@ -42,6 +37,7 @@ var input = {
     k7Eaqz: "musaex-1rdiejn",
     kZKoxP: "musaex-kyvkcq",
     kUk6DE: "musaex-98rzlu",
+    k8Qsv1: "musaex-19r3k9r",
     $$css: true
   },
   hasLeading: {
@@ -108,6 +104,11 @@ var outlineLeading = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -132,6 +133,11 @@ var outlineTrailing = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var outlineNotch = {
@@ -152,18 +158,23 @@ var outlineNotch = {
     k6qhrQ: "musaex-48fzr0",
     $$css: true
   },
-  labeled: {
+  withLabel: {
     k3lJl8: "musaex-14zl4sw",
     kRj6wj: "musaex-1bq66p9",
     $$css: true
   },
-  labeledAndHasPlaceholder: {
+  withLabelAndPlaceholder: {
     kLZC3w: "musaex-1v8p93f",
     $$css: true
   },
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
   }
 };
 var floatingLabel = {
@@ -185,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

package/dist/styles.css

@@ -516,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);
   }
@@ -800,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);
   }
@@ -1841,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);
   }
@@ -2883,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/package.json

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