@ttoss/forms 0.16.2 → 0.16.3

package/dist/esm/index.js

@@ -402,7 +402,12 @@ var useFormGroup = () => {
     levelsLength
   };
 };
-var FormGroupWrapper = props => {
+var FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}) => {
   const {
     level
   } = useFormGroup();
@@ -414,19 +419,20 @@ var FormGroupWrapper = props => {
       registerChild(level);
     }
   }, [level, registerChild]);
-  const sx = {
-    flexDirection: props.direction || "column",
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
     gap: "md",
-    width: "100%",
-    ...props.sx
+    width: "100%"
   };
   return /* @__PURE__ */jsxs6(Box3, {
     "aria-level": level,
+    ...boxProps,
     sx: {
-      marginBottom: "2xl",
-      marginX: level === 0 ? "none" : "md"
+      marginTop: level === 0 ? "none" : "lg",
+      marginBottom: "lg",
+      ...boxProps.sx
     },
-    children: [props.title && /* @__PURE__ */jsx9(Box3, {
+    children: [title && /* @__PURE__ */jsx9(Box3, {
       sx: {
         marginBottom: "md"
       },
@@ -435,12 +441,11 @@ var FormGroupWrapper = props => {
           fontSize: "2xl",
           fontWeight: "bold"
         },
-        children: props.title
+        children: title
       })
     }), /* @__PURE__ */jsx9(Flex6, {
-      ...props,
-      sx,
-      children: props.children
+      sx: childrenContainerSx,
+      children
     })]
   });
 };

package/dist/index.d.ts

@@ -71,7 +71,7 @@ declare const useFormGroup: () => {
 type FormGroupProps = {
     title?: string;
     direction?: 'column' | 'row';
-} & FlexProps;
+} & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => JSX.Element;
 
 export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -453,7 +453,12 @@ var useFormGroup = () => {
     levelsLength
   };
 };
-var FormGroupWrapper = props => {
+var FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}) => {
   const {
     level
   } = useFormGroup();
@@ -465,19 +470,20 @@ var FormGroupWrapper = props => {
       registerChild(level);
     }
   }, [level, registerChild]);
-  const sx = {
-    flexDirection: props.direction || "column",
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
     gap: "md",
-    width: "100%",
-    ...props.sx
+    width: "100%"
   };
   return /* @__PURE__ */(0, import_jsx_runtime9.jsxs)(import_ui9.Box, {
     "aria-level": level,
+    ...boxProps,
     sx: {
-      marginBottom: "2xl",
-      marginX: level === 0 ? "none" : "md"
+      marginTop: level === 0 ? "none" : "lg",
+      marginBottom: "lg",
+      ...boxProps.sx
     },
-    children: [props.title && /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Box, {
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Box, {
       sx: {
         marginBottom: "md"
       },
@@ -486,12 +492,11 @@ var FormGroupWrapper = props => {
           fontSize: "2xl",
           fontWeight: "bold"
         },
-        children: props.title
+        children: title
       })
     }), /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
-      ...props,
-      sx,
-      children: props.children
+      sx: childrenContainerSx,
+      children
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3b5fa98e8b9445d00d44fcc0788f65c7ff22d6ca"
+  "gitHead": "4db2b08b38e864b64c2652d20d1ea705768beb75"
 }

package/src/FormGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Flex, FlexProps, Text } from '@ttoss/ui';
+import { Box, BoxProps, Flex, FlexProps, Text } from '@ttoss/ui';
 
 type FormGroupLevelsManagerContextType = {
   levelsLength: number;
@@ -58,9 +58,14 @@ export const useFormGroup = () => {
 type FormGroupProps = {
   title?: string;
   direction?: 'column' | 'row';
-} & FlexProps;
+} & BoxProps;
 
-const FormGroupWrapper = (props: FormGroupProps) => {
+const FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}: FormGroupProps) => {
   const { level } = useFormGroup();
 
   const { registerChild } = React.useContext(FormGroupLevelsManagerContext);
@@ -75,22 +80,23 @@ const FormGroupWrapper = (props: FormGroupProps) => {
     }
   }, [level, registerChild]);
 
-  const sx: FlexProps['sx'] = {
-    flexDirection: props.direction || 'column',
+  const childrenContainerSx: FlexProps['sx'] = {
+    flexDirection: direction || 'column',
     gap: 'md',
     width: '100%',
-    ...props.sx,
   };
 
   return (
     <Box
       aria-level={level}
+      {...boxProps}
       sx={{
-        marginBottom: '2xl',
-        marginX: level === 0 ? 'none' : 'md',
+        marginTop: level === 0 ? 'none' : 'lg',
+        marginBottom: 'lg',
+        ...boxProps.sx,
       }}
     >
-      {props.title && (
+      {title && (
         <Box sx={{ marginBottom: 'md' }}>
           <Text
             sx={{
@@ -98,13 +104,11 @@ const FormGroupWrapper = (props: FormGroupProps) => {
               fontWeight: 'bold',
             }}
           >
-            {props.title}
+            {title}
           </Text>
         </Box>
       )}
-      <Flex {...props} sx={sx}>
-        {props.children}
-      </Flex>
+      <Flex sx={childrenContainerSx}>{children}</Flex>
     </Box>
   );
 };