@itcase/forms 1.1.29 → 1.1.31

package/dist/css/form/FormField/FormField.css

@@ -36,6 +36,7 @@
       & .form {
         &-field {
           &__label {
+            background: #fff;
             transform: scale(0.85) translate(10px, 2px);
           }
         }
@@ -49,12 +50,11 @@
         &::placeholder {
           opacity: 100%;
         }
-      }      
+      }
     }
     & .form {
       &-field {
         &__label {
-          background: #fff;
           padding: 0 4px;
           position: absolute;
           display: flex;

package/dist/itcase-forms.cjs.js

@@ -1035,15 +1035,13 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
 });
 
 const defaultCheckboxProps = {
-  appearance: 'defaultPrimary',
+  appearance: 'defaultPrimary sizeM solid',
   width: 'fill',
-  size: 'm',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextColorDisabled: 'surfaceTextDisabled',
-  labelTextSize: 's',
-  descTextSize: 's',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function FormFieldCheckbox(props) {
@@ -1124,8 +1122,11 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
 const defaultChipsProps = {
   appearance: 'surfacePrimary sizeM rounded',
   width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 function FormFieldChips(props) {
@@ -1227,8 +1228,11 @@ function FormFieldChips(props) {
 const defaultChoiceProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
-  errorBorderColor: 'errorBorderPrimary',
-  requiredBorderColor: 'warningBorderPrimary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFieldChoice(props) {
@@ -1327,7 +1331,12 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
 });
 
 const defaultCodeProps = {
-  appearance: 'defaultPrimary sizeL solid rounded'
+  appearance: 'defaultPrimary sizeL solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFieldCode(props) {
@@ -1562,10 +1571,13 @@ function FormFieldDatePicker(props) {
 }
 
 const defaultInputProps = {
-  appearance: 'sizeM defaultSecondary solid rounded',
+  appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
@@ -1665,9 +1677,13 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
 
 const defaultPasswordProps = {
   appearance: 'sizeM defaultSecondary solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
   iconRevealableHide: _default.icons24.View.HideValue,
   iconRevealableShow: _default.icons24.View.ShowValue,
-  iconFill: 'surfaceItemQuaternary'
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFieldPassword(props) {
@@ -1764,8 +1780,11 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
 const defaultSegmentedProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
-  errorLabelTextColor: 'errorTextPrimary',
-  requiredLabelTextColor: 'warningTextPrimary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 function FormFieldSegmented(props) {
@@ -1846,7 +1865,12 @@ function FormFieldSegmented(props) {
 }
 
 const defaultSelectProps = {
-  appearance: 'defaultPrimary sizeM'
+  appearance: 'defaultPrimary sizeM solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 function getDefaultValue(options, selectValue) {
@@ -1962,7 +1986,12 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
 });
 
 const defaultSwitchProps = {
-  appearance: 'defaultPrimary sizeL solid rounded'
+  appearance: 'defaultPrimary sizeL solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeL solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeL solid rounded'
 };
 
 const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFieldSwitch(props) {
@@ -2040,8 +2069,11 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
 
 const defaultTextareaProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFieldTextarea(props) {
@@ -2704,6 +2736,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     notificationCloseButton,
     notificationType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
+    shapeStrengthClass,
     before,
     after,
     isLoading,
@@ -2737,7 +2770,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
@@ -2914,32 +2947,6 @@ const DEFAULT_MESSAGES_FIELDS = {
   // required - KEY for yellow color
   // error - KEY for red color
 
-  // key: 'required'
-  required: {
-    key: 'required',
-    message: 'Обязательное поле'
-  },
-  phone_required: {
-    key: 'required',
-    message: 'Укажите номер телефона'
-  },
-  email_required: {
-    key: 'required',
-    message: 'Укажите адрес электронной почты'
-  },
-  password_required: {
-    key: 'required',
-    message: 'Введите пароль'
-  },
-  phone_or_email_required: {
-    key: 'required',
-    message: 'Введите телефон или адрес эл. почты'
-  },
-  // key: 'error'
-  matches: {
-    key: 'error',
-    message: 'Допускается ввод только цифр от 0 до 9'
-  },
   min: {
     key: 'error',
     message: ({
@@ -2956,21 +2963,47 @@ const DEFAULT_MESSAGES_FIELDS = {
     key: 'error',
     message: 'Введите корректный URL-адрес'
   },
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  },
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  },
   invalid_value: {
     key: 'error',
     message: 'Некорректное значение'
   },
+  // key: 'error'
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
   numeric_value: {
     key: 'error',
     message: 'Только числовое значение'
   },
-  phone_error: {
-    key: 'error',
-    message: 'Введите корректный номер телефона'
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
   },
-  email_error: {
-    key: 'error',
-    message: 'Введите корректный адрес электронной почты'
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  },
+  // key: 'required'
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
   }
 };
 

package/dist/itcase-forms.esm.js

@@ -1024,15 +1024,13 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
 });
 
 const defaultCheckboxProps = {
-  appearance: 'defaultPrimary',
+  appearance: 'defaultPrimary sizeM solid',
   width: 'fill',
-  size: 'm',
-  labelTextColor: 'surfaceTextPrimary',
-  labelTextColorDisabled: 'surfaceTextDisabled',
-  labelTextSize: 's',
-  descTextSize: 's',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
@@ -1113,8 +1111,11 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
 const defaultChipsProps = {
   appearance: 'surfacePrimary sizeM rounded',
   width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 function FormFieldChips(props) {
@@ -1216,8 +1217,11 @@ function FormFieldChips(props) {
 const defaultChoiceProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
-  errorBorderColor: 'errorBorderPrimary',
-  requiredBorderColor: 'warningBorderPrimary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
@@ -1316,7 +1320,12 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
 });
 
 const defaultCodeProps = {
-  appearance: 'defaultPrimary sizeL solid rounded'
+  appearance: 'defaultPrimary sizeL solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
@@ -1551,10 +1560,13 @@ function FormFieldDatePicker(props) {
 }
 
 const defaultInputProps = {
-  appearance: 'sizeM defaultSecondary solid rounded',
+  appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
@@ -1654,9 +1666,13 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
 
 const defaultPasswordProps = {
   appearance: 'sizeM defaultSecondary solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
   iconRevealableHide: icons24.View.HideValue,
   iconRevealableShow: icons24.View.ShowValue,
-  iconFill: 'surfaceItemQuaternary'
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
@@ -1753,8 +1769,11 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
 const defaultSegmentedProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
-  errorLabelTextColor: 'errorTextPrimary',
-  requiredLabelTextColor: 'warningTextPrimary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 function FormFieldSegmented(props) {
@@ -1835,7 +1854,12 @@ function FormFieldSegmented(props) {
 }
 
 const defaultSelectProps = {
-  appearance: 'defaultPrimary sizeM'
+  appearance: 'defaultPrimary sizeM solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 function getDefaultValue(options, selectValue) {
@@ -1951,7 +1975,12 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
 });
 
 const defaultSwitchProps = {
-  appearance: 'defaultPrimary sizeL solid rounded'
+  appearance: 'defaultPrimary sizeL solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeL solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeL solid rounded'
 };
 
 const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
@@ -2029,8 +2058,11 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
 
 const defaultTextareaProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
-  errorBorderColor: 'errorBorderSecondary',
-  requiredBorderColor: 'warningBorderSecondary'
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
 const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
@@ -2693,6 +2725,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     notificationCloseButton,
     notificationType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
+    shapeStrengthClass,
     before,
     after,
     isLoading,
@@ -2726,7 +2759,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
@@ -2903,32 +2936,6 @@ const DEFAULT_MESSAGES_FIELDS = {
   // required - KEY for yellow color
   // error - KEY for red color
 
-  // key: 'required'
-  required: {
-    key: 'required',
-    message: 'Обязательное поле'
-  },
-  phone_required: {
-    key: 'required',
-    message: 'Укажите номер телефона'
-  },
-  email_required: {
-    key: 'required',
-    message: 'Укажите адрес электронной почты'
-  },
-  password_required: {
-    key: 'required',
-    message: 'Введите пароль'
-  },
-  phone_or_email_required: {
-    key: 'required',
-    message: 'Введите телефон или адрес эл. почты'
-  },
-  // key: 'error'
-  matches: {
-    key: 'error',
-    message: 'Допускается ввод только цифр от 0 до 9'
-  },
   min: {
     key: 'error',
     message: ({
@@ -2945,21 +2952,47 @@ const DEFAULT_MESSAGES_FIELDS = {
     key: 'error',
     message: 'Введите корректный URL-адрес'
   },
+  email_error: {
+    key: 'error',
+    message: 'Введите корректный адрес электронной почты'
+  },
+  phone_error: {
+    key: 'error',
+    message: 'Введите корректный номер телефона'
+  },
+  email_required: {
+    key: 'required',
+    message: 'Укажите адрес электронной почты'
+  },
   invalid_value: {
     key: 'error',
     message: 'Некорректное значение'
   },
+  // key: 'error'
+  matches: {
+    key: 'error',
+    message: 'Допускается ввод только цифр от 0 до 9'
+  },
   numeric_value: {
     key: 'error',
     message: 'Только числовое значение'
   },
-  phone_error: {
-    key: 'error',
-    message: 'Введите корректный номер телефона'
+  password_required: {
+    key: 'required',
+    message: 'Введите пароль'
   },
-  email_error: {
-    key: 'error',
-    message: 'Введите корректный адрес электронной почты'
+  phone_or_email_required: {
+    key: 'required',
+    message: 'Введите телефон или адрес эл. почты'
+  },
+  phone_required: {
+    key: 'required',
+    message: 'Укажите номер телефона'
+  },
+  // key: 'required'
+  required: {
+    key: 'required',
+    message: 'Обязательное поле'
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.29",
+  "version": "1.1.31",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -33,12 +33,12 @@
   },
   "dependencies": {
     "@itcase/common": "^1.2.28",
-    "@itcase/config": "^1.0.54",
+    "@itcase/config": "^1.0.55",
     "@itcase/icons": "^1.2.16",
-    "@itcase/storybook-config": "^1.1.66",
+    "@itcase/storybook-config": "^1.1.77",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
-    "@itcase/ui": "^1.8.75",
+    "@itcase/ui": "^1.8.85",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",
@@ -61,7 +61,7 @@
     "@babel/preset-react": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@itcase/lint": "^1.1.29",
+    "@itcase/lint": "^1.1.30",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
@@ -76,15 +76,15 @@
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "9.32.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.4",
     "postcss": "^8.5.6",
     "prettier": "3.6.2",
-    "rollup": "^4.46.0",
+    "rollup": "^4.46.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.2.7",
-    "storybook": "^9.0.18",
-    "stylelint": "^16.22.0",
-    "typescript": "^5.8.3",
-    "yup": "^1.6.1"
+    "storybook": "^9.1.1",
+    "stylelint": "^16.23.0",
+    "typescript": "^5.9.2",
+    "yup": "^1.7.0"
   }
 }