@ttoss/forms 0.39.1 → 0.40.1

package/README.md

@@ -233,6 +233,7 @@ All form field components share common props:
 - `defaultValue`: Initial field value
 - `tooltip`: Label tooltip configuration
 - `warning`: Warning message displayed below the field
+- `auxiliaryCheckbox`: Optional auxiliary checkbox configuration
 - `sx`: Theme-UI styling object
 
 ### Disabling Form Fields
@@ -284,6 +285,44 @@ const formMethods = useForm({
 <FormFieldInput name="id" label="ID" disabled />;
 ```
 
+### Auxiliary Checkbox
+
+Form fields can include an optional auxiliary checkbox rendered between the field and error message. This is useful for input confirmation, terms acceptance, or conditional display of other fields.
+
+```tsx
+<FormFieldInput
+  name="email"
+  label="Email"
+  auxiliaryCheckbox={{
+    name: 'confirmEmail',
+    label: 'Send me promotional emails',
+  }}
+/>
+```
+
+The auxiliary checkbox can be disabled independently of the main field:
+
+```tsx
+<FormFieldInput
+  name="email"
+  label="Email"
+  auxiliaryCheckbox={{
+    name: 'confirmEmail',
+    label: 'Send me promotional emails',
+    disabled: true, // Checkbox is disabled, but email field is enabled
+  }}
+/>
+```
+
+**Props for `auxiliaryCheckbox`:**
+
+- `name` (required): Field name for the checkbox
+- `label` (required): Checkbox label text
+- `disabled`: Disables the checkbox (independent of field disabled state)
+- `defaultValue`: Initial checkbox value
+
+The auxiliary checkbox's disabled state is the logical OR of its own `disabled` prop and the field's disabled state.
+
 ### FormFieldInput
 
 Text input field supporting all HTML input types.

package/dist/Brazil/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, FieldPath } from 'react-hook-form';
-import { a as FormFieldPatternFormatProps, F as FormFieldProps } from '../FormFieldPatternFormat-D5CI6eUA.js';
+import { a as FormFieldPatternFormatProps, F as FormFieldProps } from '../FormFieldPatternFormat-kaO0pl1R.js';
 import { PatternFormatProps, NumberFormatBaseProps } from 'react-number-format';
 import '@ttoss/ui';
 import 'react';

package/dist/{FormFieldPatternFormat-D5CI6eUA.d.ts → FormFieldPatternFormat-kaO0pl1R.d.ts}

@@ -46,7 +46,7 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
      * Optional auxiliary checkbox to render between the field and error message.
      * Useful for input confirmation or conditional display of other fields.
      */
-    auxiliaryCheckbox?: Omit<AuxiliaryCheckboxProps<TFieldValues, FieldPath<TFieldValues>>, 'disabled'>;
+    auxiliaryCheckbox?: AuxiliaryCheckboxProps<TFieldValues, FieldPath<TFieldValues>>;
 } & SxProp;
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;

package/dist/esm/Brazil/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormField, FormFieldCNPJ, FormFieldCPF, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "../chunk-QJQFXN4B.js";
+import { FormField, FormFieldCNPJ, FormFieldCPF, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "../chunk-BL55OAIO.js";
 
 // src/Brazil/FormFieldCEP.tsx
 var FormFieldCEP = /* @__PURE__ */__name(({

package/dist/esm/MultistepForm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-EGHO72SX.js";
-import { __name } from "../chunk-QJQFXN4B.js";
+import { Form, useForm, yupResolver } from "../chunk-ILQOS34E.js";
+import { __name } from "../chunk-BL55OAIO.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-QJQFXN4B.js → chunk-BL55OAIO.js}

@@ -81,7 +81,8 @@ var AuxiliaryCheckbox = /* @__PURE__ */__name(({
     sx: {
       flexDirection: "row",
       alignItems: "center",
-      cursor: isDisabled ? "not-allowed" : "pointer"
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      opacity: isDisabled ? 0.5 : 1
     }
   }, /* @__PURE__ */React2.createElement(Flex, {
     sx: {
@@ -190,7 +191,7 @@ var FormField = /* @__PURE__ */__name(({
     css
   }, memoizedRender, auxiliaryCheckbox && /* @__PURE__ */React3.createElement(AuxiliaryCheckbox, {
     ...auxiliaryCheckbox,
-    disabled
+    disabled: auxiliaryCheckbox.disabled || disabled
   }), /* @__PURE__ */React3.createElement(FormErrorMessage, {
     name: errorNameToDisplay
   }), warning && !hasError && /* @__PURE__ */React3.createElement(Flex2, {

package/dist/esm/{chunk-EGHO72SX.js → chunk-ILQOS34E.js}

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "./chunk-QJQFXN4B.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "./chunk-BL55OAIO.js";
 
 // src/Form.tsx
 import { Box } from "@ttoss/ui";

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-EGHO72SX.js";
-import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-QJQFXN4B.js";
+import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-ILQOS34E.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-BL55OAIO.js";
 export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-D5CI6eUA.js';
-export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-D5CI6eUA.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-kaO0pl1R.js';
+export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-kaO0pl1R.js';
 import { NumericFormatProps } from 'react-number-format';
 import { DateRange } from '@ttoss/components/DatePicker';
 import './typings.d-BZ6kUiQ4.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.39.1",
+  "version": "0.40.1",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -40,8 +40,8 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/components": "^2.12.6",
-    "@ttoss/react-i18n": "^2.0.26",
-    "@ttoss/ui": "^6.5.1"
+    "@ttoss/ui": "^6.5.1",
+    "@ttoss/react-i18n": "^2.0.26"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -53,11 +53,11 @@
     "yup": "^1.7.1",
     "@ttoss/components": "^2.12.6",
     "@ttoss/i18n-cli": "^0.7.38",
-    "@ttoss/config": "^1.35.12",
     "@ttoss/react-i18n": "^2.0.26",
     "@ttoss/test-utils": "^4.0.3",
     "@ttoss/ui": "^6.5.1",
-    "@ttoss/react-icons": "^0.5.7"
+    "@ttoss/react-icons": "^0.5.7",
+    "@ttoss/config": "^1.35.12"
   },
   "publishConfig": {
     "access": "public",