musae 1.3.1-beta.5 → 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,
@@ -104,21 +102,20 @@ 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, 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,
@@ -100,21 +98,20 @@ 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, 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

@@ -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,16 @@ var outlineLeading = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
+  },
+  shaped: {
+    krdFHd: "musaex-16hqlox",
+    kVL7Gh: "musaex-e8lclw",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -136,6 +142,16 @@ var outlineTrailing = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
+  },
+  shaped: {
+    kfmiAY: "musaex-ortkii",
+    kT0f0o: "musaex-1ogpvgu",
+    $$css: true
   }
 };
 var outlineNotch = {
@@ -156,18 +172,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 +210,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,16 @@ 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)">;
+        }>;
+        readonly shaped: Readonly<{
+            readonly borderStartStartRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderStartStartRadius", string>;
+            readonly borderEndStartRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderEndStartRadius", string>;
+        }>;
     }>;
     outlineNotch: Readonly<{
         readonly base: Readonly<{
@@ -123,18 +130,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 +172,16 @@ 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)">;
+        }>;
+        readonly shaped: Readonly<{
+            readonly borderStartEndRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderStartEndRadius", string>;
+            readonly borderEndEndRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderEndEndRadius", string>;
+        }>;
     }>;
     floatingLabel: Readonly<{
         readonly base: Readonly<{
@@ -179,6 +202,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,16 @@ var outlineLeading = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
+  },
+  shaped: {
+    krdFHd: "musaex-16hqlox",
+    kVL7Gh: "musaex-e8lclw",
+    $$css: true
   }
 };
 var outlineTrailing = {
@@ -132,6 +138,16 @@ var outlineTrailing = {
   disabled: {
     kVAM5u: "musaex-utl9qk",
     $$css: true
+  },
+  invalid: {
+    kVAM5u: "musaex-1ofxpqo",
+    k6qhrQ: "musaex-7rzjjb",
+    $$css: true
+  },
+  shaped: {
+    kfmiAY: "musaex-ortkii",
+    kT0f0o: "musaex-1ogpvgu",
+    $$css: true
   }
 };
 var outlineNotch = {
@@ -152,18 +168,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 +206,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/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 {};