@ttoss/forms 0.42.0 → 0.43.0

package/dist/esm/MultistepForm/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-YCW3GPTZ.js";
+import { Form, useForm, yupResolver } from "../chunk-4YLT3VPV.js";
 import { __name } from "../chunk-ZORKZWD7.js";
 
 // src/MultistepForm/MultistepForm.tsx

package/dist/esm/{chunk-YCW3GPTZ.js → chunk-4YLT3VPV.js}

@@ -3,24 +3,137 @@ import * as React from 'react';
 import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "./chunk-ZORKZWD7.js";
 
 // src/Form.tsx
-import { Box } from "@ttoss/ui";
-import * as React2 from "react";
+import { Box as Box2 } from "@ttoss/ui";
 import { FormProvider } from "react-hook-form";
-var Form = /* @__PURE__ */__name(({
+
+// src/FormActions.tsx
+import { Flex } from "@ttoss/ui";
+var alignMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var FormActions = /* @__PURE__ */__name(({
+  align = "right",
+  children,
+  sticky = false,
+  sx,
+  ...flexProps
+}) => {
+  return /* @__PURE__ */React.createElement(Flex, {
+    ...flexProps,
+    sx: {
+      flexDirection: "row",
+      gap: "2",
+      justifyContent: alignMap[align],
+      ...(sticky && {
+        position: "sticky",
+        bottom: 0,
+        backgroundColor: "background",
+        paddingY: "3",
+        zIndex: "sticky"
+      }),
+      ...sx
+    }
+  }, children);
+}, "FormActions");
+
+// src/FormGroup.tsx
+import { Box, Flex as Flex2, Text } from "@ttoss/ui";
+import * as React2 from "react";
+var FormGroupContext = /* @__PURE__ */React2.createContext({});
+var useFormGroup = /* @__PURE__ */__name(() => {
+  const {
+    parentLevel
+  } = React2.useContext(FormGroupContext);
+  return {
+    level: parentLevel,
+    /**
+    * @deprecated `levelsLength` has been removed from `FormGroup` internals.
+    * This field always returns `undefined`. Use `level` to determine nesting depth.
+    */
+    levelsLength: void 0
+  };
+}, "useFormGroup");
+var FormGroupWrapper = /* @__PURE__ */__name(({
+  title,
+  description,
+  direction,
+  children,
+  name,
+  ...boxProps
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "4",
+    width: "100%"
+  };
+  return /* @__PURE__ */React2.createElement(Box, {
+    "data-level": level,
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "4",
+      ...boxProps.sx
+    }
+  }, (title || description) && /* @__PURE__ */React2.createElement(Box, {
+    sx: {
+      marginBottom: "2"
+    }
+  }, title && /* @__PURE__ */React2.createElement(Text, {
+    sx: {
+      fontSize: "2xl",
+      fontWeight: "bold"
+    }
+  }, title), description && /* @__PURE__ */React2.createElement(Text, {
+    sx: {
+      color: "text.secondary"
+    }
+  }, description)), /* @__PURE__ */React2.createElement(Flex2, {
+    sx: childrenContainerSx
+  }, children), name && /* @__PURE__ */React2.createElement(FormErrorMessage, {
+    name
+  }));
+}, "FormGroupWrapper");
+var FormGroup = /* @__PURE__ */__name(props => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */React2.createElement(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    }
+  }, /* @__PURE__ */React2.createElement(FormGroupWrapper, props));
+}, "FormGroup");
+
+// src/Form.tsx
+var FormBase = /* @__PURE__ */__name(({
   children,
   onSubmit,
   sx,
   ...formMethods
 }) => {
-  return /* @__PURE__ */React2.createElement(FormProvider, formMethods, /* @__PURE__ */React2.createElement(Box, {
+  return /* @__PURE__ */React.createElement(FormProvider, formMethods, /* @__PURE__ */React.createElement(Box2, {
     as: "form",
     variant: "forms.form",
     onSubmit: formMethods.handleSubmit(data => {
       return onSubmit?.(data);
     }),
-    sx
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      ...sx
+    }
   }, children));
-}, "Form");
+}, "FormBase");
+var Form = Object.assign(FormBase, {
+  Group: FormGroup,
+  Actions: FormActions
+});
 
 // src/FormFieldCheckbox.tsx
 import { Checkbox } from "@ttoss/ui";
@@ -363,7 +476,7 @@ var FormFieldPassword = /* @__PURE__ */__name(({
 }, "FormFieldPassword");
 
 // src/FormFieldRadio.tsx
-import { Flex, Label, Radio } from "@ttoss/ui";
+import { Flex as Flex3, Label, Radio } from "@ttoss/ui";
 var FormFieldRadio = /* @__PURE__ */__name(({
   disabled,
   options,
@@ -397,7 +510,7 @@ var FormFieldRadio = /* @__PURE__ */__name(({
     render: /* @__PURE__ */__name(({
       field
     }) => {
-      return /* @__PURE__ */React.createElement(Flex, {
+      return /* @__PURE__ */React.createElement(Flex3, {
         sx: {
           flexDirection: "column",
           gap: "1"
@@ -431,7 +544,7 @@ var FormFieldRadio = /* @__PURE__ */__name(({
 }, "FormFieldRadio");
 
 // src/FormFieldRadioCard.tsx
-import { Box as Box2, Flex as Flex2, Label as Label2, Radio as Radio2, Text } from "@ttoss/ui";
+import { Box as Box3, Flex as Flex4, Label as Label2, Radio as Radio2, Text as Text2 } from "@ttoss/ui";
 var FormFieldRadioCard = /* @__PURE__ */__name(({
   disabled,
   ...props
@@ -467,7 +580,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
     render: /* @__PURE__ */__name(({
       field
     }) => {
-      return /* @__PURE__ */React.createElement(Flex2, {
+      return /* @__PURE__ */React.createElement(Flex4, {
         sx: {
           flexDirection: direction,
           gap: "4"
@@ -475,7 +588,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
       }, options.map(option => {
         const key = `form-field-radio-${name}-${option.value}`;
         const isSelected = field.value === option.value;
-        return /* @__PURE__ */React.createElement(Box2, {
+        return /* @__PURE__ */React.createElement(Box3, {
           key,
           sx: {
             gap: "2",
@@ -506,12 +619,12 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
           checked: field.value === option.value,
           name,
           disabled: disabled ?? field.disabled
-        }), /* @__PURE__ */React.createElement(Flex2, {
+        }), /* @__PURE__ */React.createElement(Flex4, {
           sx: {
             flexDirection: "column",
             gap: "1"
           }
-        }, option.label && /* @__PURE__ */React.createElement(Text, null, option.label), option.description && /* @__PURE__ */React.createElement(Text, {
+        }, option.label && /* @__PURE__ */React.createElement(Text2, null, option.label), option.description && /* @__PURE__ */React.createElement(Text2, {
           sx: {
             fontSize: "sm"
           }
@@ -522,7 +635,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
 }, "FormFieldRadioCard");
 
 // src/FormFieldRadioCardIcony.tsx
-import { Box as Box3, Flex as Flex3, Tag, Text as Text2 } from "@ttoss/ui";
+import { Box as Box4, Flex as Flex5, Tag, Text as Text3 } from "@ttoss/ui";
 import * as React3 from "react";
 var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
   disabled,
@@ -563,7 +676,7 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
           field.onBlur();
         }
       }, "handleOptionClick");
-      return /* @__PURE__ */React3.createElement(Flex3, {
+      return /* @__PURE__ */React3.createElement(Flex5, {
         sx: {
           flexDirection: direction,
           gap: "4"
@@ -573,7 +686,7 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
         const isSelected = field.value === option.value;
         const IconComponent = option.icon;
         const tag = option.tag;
-        return /* @__PURE__ */React3.createElement(Box3, {
+        return /* @__PURE__ */React3.createElement(Box4, {
           key,
           onClick: /* @__PURE__ */__name(() => {
             return handleOptionClick(option.value);
@@ -594,25 +707,25 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
             opacity: isDisabled ? 0.5 : 1,
             transition: "all 0.2s ease-in-out"
           }
-        }, IconComponent && /* @__PURE__ */React3.createElement(Box3, {
+        }, IconComponent && /* @__PURE__ */React3.createElement(Box4, {
           sx: {
             marginBottom: "2",
             color: "text.primary"
           }
         }, /* @__PURE__ */React3.createElement(IconComponent, {
           size: 24
-        })), /* @__PURE__ */React3.createElement(Flex3, {
+        })), /* @__PURE__ */React3.createElement(Flex5, {
           sx: {
             flexDirection: "column",
             gap: "1"
           }
-        }, option.label && /* @__PURE__ */React3.createElement(Text2, {
+        }, option.label && /* @__PURE__ */React3.createElement(Text3, {
           sx: {
             fontSize: "lg",
             fontWeight: "semibold",
             color: "text.primary"
           }
-        }, option.label), option.description && /* @__PURE__ */React3.createElement(Text2, {
+        }, option.label), option.description && /* @__PURE__ */React3.createElement(Text3, {
           sx: {
             fontSize: "md",
             color: "text.secondary"
@@ -845,78 +958,6 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
   });
 }, "FormFieldTextarea");
 
-// src/FormGroup.tsx
-import { Box as Box4, Flex as Flex4, Text as Text3 } from "@ttoss/ui";
-import * as React4 from "react";
-var FormGroupContext = /* @__PURE__ */React4.createContext({});
-var useFormGroup = /* @__PURE__ */__name(() => {
-  const {
-    parentLevel
-  } = React4.useContext(FormGroupContext);
-  return {
-    level: parentLevel,
-    /**
-    * @deprecated `levelsLength` has been removed from `FormGroup` internals.
-    * This field always returns `undefined`. Use `level` to determine nesting depth.
-    */
-    levelsLength: void 0
-  };
-}, "useFormGroup");
-var FormGroupWrapper = /* @__PURE__ */__name(({
-  title,
-  description,
-  direction,
-  children,
-  name,
-  ...boxProps
-}) => {
-  const {
-    level
-  } = useFormGroup();
-  const childrenContainerSx = {
-    flexDirection: direction || "column",
-    gap: "1",
-    width: "100%"
-  };
-  return /* @__PURE__ */React4.createElement(Box4, {
-    "data-level": level,
-    ...boxProps,
-    sx: {
-      marginTop: level === 0 ? "none" : "4",
-      marginBottom: "4",
-      ...boxProps.sx
-    }
-  }, (title || description) && /* @__PURE__ */React4.createElement(Box4, {
-    sx: {
-      marginBottom: "2"
-    }
-  }, title && /* @__PURE__ */React4.createElement(Text3, {
-    sx: {
-      fontSize: "2xl",
-      fontWeight: "bold"
-    }
-  }, title), description && /* @__PURE__ */React4.createElement(Text3, {
-    sx: {
-      color: "text.secondary"
-    }
-  }, description)), /* @__PURE__ */React4.createElement(Flex4, {
-    sx: childrenContainerSx
-  }, children), name && /* @__PURE__ */React4.createElement(FormErrorMessage, {
-    name
-  }));
-}, "FormGroupWrapper");
-var FormGroup = /* @__PURE__ */__name(props => {
-  const {
-    level
-  } = useFormGroup();
-  const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */React4.createElement(FormGroupContext.Provider, {
-    value: {
-      parentLevel: currentLevel
-    }
-  }, /* @__PURE__ */React4.createElement(FormGroupWrapper, props));
-}, "FormGroup");
-
 // src/yup/i18n.ts
 import { defineMessage } from "@ttoss/react-i18n";
 import { setLocale } from "yup";
@@ -1083,4 +1124,4 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, FormProvider as FormProvider2, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, z3 as z, yupResolver, zodResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { FormActions, useFormGroup, FormGroup, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, yup2 as yup, z3 as z, yupResolver, zodResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };

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, z, zodResolver } from "./chunk-YCW3GPTZ.js";
+import { Controller, Form, FormActions, 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, z, zodResolver } from "./chunk-4YLT3VPV.js";
 import { COMMON_PHONE_COUNTRY_CODES, FormErrorMessage, FormField, FormFieldPatternFormat, FormFieldPhone, MANUAL_PHONE_COUNTRY_CODE } from "./chunk-ZORKZWD7.js";
-export { COMMON_PHONE_COUNTRY_CODES, Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldPhone, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, MANUAL_PHONE_COUNTRY_CODE, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver };
+export { COMMON_PHONE_COUNTRY_CODES, Controller, Form, FormActions, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldPhone, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, MANUAL_PHONE_COUNTRY_CODE, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SegmentedControlProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
+import { FlexProps, BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SegmentedControlProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
 import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
 export * from 'react-hook-form';
@@ -16,11 +16,141 @@ export { z };
 export { yupResolver } from '@hookform/resolvers/yup';
 export { zodResolver } from '@hookform/resolvers/zod';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
+declare const alignMap: {
+    readonly left: "flex-start";
+    readonly center: "center";
+    readonly right: "flex-end";
+};
+/**
+ * Props for the FormActions component.
+ */
+type FormActionsProps = {
+    /** Action buttons (Submit, Cancel, Reset, etc.). */
+    children: React.ReactNode;
+    /**
+     * Horizontal alignment of the action buttons.
+     * @default 'right'
+     */
+    align?: keyof typeof alignMap;
+    /**
+     * When `true`, the action bar sticks to the bottom of the viewport so it
+     * remains visible while the user scrolls through a long form.
+     * @default false
+     */
+    sticky?: boolean;
+} & Omit<FlexProps, 'children'>;
+/**
+ * FormActions is a layout container for form action buttons such as Submit,
+ * Cancel, and Reset. It renders a flex row with consistent spacing.
+ *
+ * Use `align` to control horizontal button placement (`'left'`, `'center'`,
+ * or `'right'`). Use `sticky` to keep the action bar visible while the user
+ * scrolls through a long form.
+ *
+ * @example
+ * ```tsx
+ * <Form.Actions align="right" sticky>
+ *   <Button variant="secondary" onClick={onCancel}>Cancel</Button>
+ *   <Button type="submit">Save</Button>
+ * </Form.Actions>
+ * ```
+ */
+declare const FormActions: ({ align, children, sticky, sx, ...flexProps }: FormActionsProps) => react_jsx_runtime.JSX.Element;
+
+declare const useFormGroup: () => {
+    level: number | undefined;
+    /**
+     * @deprecated `levelsLength` has been removed from `FormGroup` internals.
+     * This field always returns `undefined`. Use `level` to determine nesting depth.
+     */
+    levelsLength: number | undefined;
+};
+/**
+ * Props for the FormGroup component.
+ */
+type FormGroupProps = {
+    /**
+     * The field name used to display a validation error message below the group.
+     * Useful when the group maps to an array or object field in the form schema.
+     */
+    name?: string;
+    /**
+     * Optional heading displayed above the group's children.
+     */
+    title?: string;
+    /**
+     * Optional description displayed below the title.
+     */
+    description?: string;
+    /**
+     * Layout direction for the group's children.
+     * @default 'column'
+     */
+    direction?: 'column' | 'row';
+} & BoxProps;
+/**
+ * FormGroup is a layout container that organises form fields into labelled,
+ * optionally nested sections. Each nested `FormGroup` increments an internal
+ * `level` counter exposed via `useFormGroup`, which drives a `data-level`
+ * attribute and top-margin spacing so deeper groups are visually indented.
+ *
+ * @example
+ * ```tsx
+ * <FormGroup title="Personal details">
+ *   <FormFieldInput name="firstName" label="First name" />
+ *   <FormFieldInput name="lastName" label="Last name" />
+ *
+ *   <FormGroup title="Address" direction="row">
+ *     <FormFieldInput name="city" label="City" />
+ *     <FormFieldInput name="zip" label="ZIP" />
+ *   </FormGroup>
+ * </FormGroup>
+ * ```
+ *
+ * @example
+ * // Show a group-level validation error (e.g. for an array field)
+ * ```tsx
+ * <FormGroup name="items" title="Items">
+ *   {fields.map((field, i) => (
+ *     <FormFieldInput key={field.id} name={`items[${i}].value`} label="Value" />
+ *   ))}
+ * </FormGroup>
+ * ```
+ */
+declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Form is the root component for all form compositions. It wraps
+ * `react-hook-form`'s `FormProvider` and an HTML `<form>` element,
+ * forwarding submission handling.
+ *
+ * Use the compound sub-components for structure:
+ * - `Form.Group` – groups related fields with optional title/description
+ * - `Form.Actions` – footer bar for Submit / Cancel / Reset buttons
+ *
+ * @example
+ * ```tsx
+ * const methods = useForm<FormValues>();
+ *
+ * <Form {...methods} onSubmit={handleSubmit}>
+ *   <Form.Group title="Personal details">
+ *     <FormFieldInput name="firstName" label="First name" />
+ *   </Form.Group>
+ *   <Form.Actions>
+ *     <Button variant="secondary" onClick={onCancel}>Cancel</Button>
+ *     <Button type="submit">Save</Button>
+ *   </Form.Actions>
+ * </Form>
+ * ```
+ */
+declare const Form: (<TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
     onSubmit?: (data: TTransformedValues) => Promise<void> | void;
     sx?: BoxProps["sx"];
-} & FormProviderProps<TFieldValues, TContext, TTransformedValues>) => react_jsx_runtime.JSX.Element;
+} & FormProviderProps<TFieldValues, TContext, TTransformedValues>) => react_jsx_runtime.JSX.Element) & {
+    Group: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+    Actions: ({ align, children, sticky, sx, ...flexProps }: FormActionsProps) => react_jsx_runtime.JSX.Element;
+};
 
 declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
     name: FieldName<TFieldValues>;
@@ -112,66 +242,4 @@ declare const FormFieldSwitch: <TFieldValues extends FieldValues = FieldValues,
 type FormFieldTextareaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<TextareaProps, 'name'>;
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldTextareaProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
-declare const useFormGroup: () => {
-    level: number | undefined;
-    /**
-     * @deprecated `levelsLength` has been removed from `FormGroup` internals.
-     * This field always returns `undefined`. Use `level` to determine nesting depth.
-     */
-    levelsLength: number | undefined;
-};
-/**
- * Props for the FormGroup component.
- */
-type FormGroupProps = {
-    /**
-     * The field name used to display a validation error message below the group.
-     * Useful when the group maps to an array or object field in the form schema.
-     */
-    name?: string;
-    /**
-     * Optional heading displayed above the group's children.
-     */
-    title?: string;
-    /**
-     * Optional description displayed below the title.
-     */
-    description?: string;
-    /**
-     * Layout direction for the group's children.
-     * @default 'column'
-     */
-    direction?: 'column' | 'row';
-} & BoxProps;
-/**
- * FormGroup is a layout container that organises form fields into labelled,
- * optionally nested sections. Each nested `FormGroup` increments an internal
- * `level` counter exposed via `useFormGroup`, which drives a `data-level`
- * attribute and top-margin spacing so deeper groups are visually indented.
- *
- * @example
- * ```tsx
- * <FormGroup title="Personal details">
- *   <FormFieldInput name="firstName" label="First name" />
- *   <FormFieldInput name="lastName" label="Last name" />
- *
- *   <FormGroup title="Address" direction="row">
- *     <FormFieldInput name="city" label="City" />
- *     <FormFieldInput name="zip" label="ZIP" />
- *   </FormGroup>
- * </FormGroup>
- * ```
- *
- * @example
- * // Show a group-level validation error (e.g. for an array field)
- * ```tsx
- * <FormGroup name="items" title="Items">
- *   {fields.map((field, i) => (
- *     <FormFieldInput key={field.id} name={`items[${i}].value`} label="Value" />
- *   ))}
- * </FormGroup>
- * ```
- */
-declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
-
-export { type DateRangePreset, Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };
+export { type DateRangePreset, Form, FormActions, type FormActionsProps, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -40,9 +40,9 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.13.2",
     "@ttoss/react-i18n": "^2.1.0",
-    "@ttoss/ui": "^6.8.0"
+    "@ttoss/ui": "^6.8.0",
+    "@ttoss/components": "^2.13.2"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",