@ttoss/forms 0.14.32 → 0.15.0

package/dist/esm/index.js

@@ -311,6 +311,7 @@ import { Flex as Flex2 } from "@ttoss/ui";
 import React3 from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
+  levelsLength: 1,
   registerChild: () => {
     return null;
   }
@@ -345,9 +346,7 @@ var useFormGroup = () => {
     levelsLength
   };
 };
-var FormGroupWrapper = ({
-  children
-}) => {
+var FormGroupWrapper = props => {
   const {
     level,
     levelsLength
@@ -360,31 +359,21 @@ var FormGroupWrapper = ({
       registerChild(level);
     }
   }, [level, registerChild]);
-  const sx = React3.useMemo(() => {
-    return {
-      flexDirection: "column",
-      width: "100%",
-      gap: "md",
-      paddingLeft: ({
-        space
-      }) => {
-        if (!level || !levelsLength) {
-          return 0;
-        }
-        const value = levelsLength / level;
-        return `calc(${space["lg"]} / ${value})`;
-      }
-    };
-  }, [level, levelsLength]);
+  const sx = {
+    flexDirection: props.direction || "column",
+    width: "100%",
+    gap: 3 * (levelsLength - (level || 0)),
+    paddingX: level ? "md" : "none",
+    ...props.sx
+  };
   return /* @__PURE__ */jsx9(Flex2, {
     "aria-level": level,
+    ...props,
     sx,
-    children
+    children: props.children
   });
 };
-var FormGroup = ({
-  children
-}) => {
+var FormGroup = props => {
   const {
     level
   } = useFormGroup();
@@ -395,10 +384,10 @@ var FormGroup = ({
     },
     children: currentLevel === 0 ? /* @__PURE__ */jsx9(FormGroupLevelsManager, {
       children: /* @__PURE__ */jsx9(FormGroupWrapper, {
-        children
+        ...props
       })
     }) : /* @__PURE__ */jsx9(FormGroupWrapper, {
-      children
+      ...props
     })
   });
 };

package/dist/index.d.ts

@@ -5,9 +5,8 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import React__default from 'react';
 import * as _ttoss_ui from '@ttoss/ui';
-import { BoxProps, CheckboxProps, LabelProps, RadioProps } from '@ttoss/ui';
+import { BoxProps, CheckboxProps, LabelProps, RadioProps, FlexProps } from '@ttoss/ui';
 import * as theme_ui from 'theme-ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
@@ -68,11 +67,11 @@ declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues
 
 declare const useFormGroup: () => {
     level: number | undefined;
-    levelsLength: number | undefined;
+    levelsLength: number;
 };
 type FormGroupProps = {
-    children: React__default.ReactNode;
-};
-declare const FormGroup: ({ children }: FormGroupProps) => JSX.Element;
+    direction?: 'column' | 'row';
+} & FlexProps;
+declare const FormGroup: (props: FormGroupProps) => JSX.Element;
 
 export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -362,6 +362,7 @@ var import_ui9 = require("@ttoss/ui");
 var import_react = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormGroupLevelsManagerContext = import_react.default.createContext({
+  levelsLength: 1,
   registerChild: () => {
     return null;
   }
@@ -396,9 +397,7 @@ var useFormGroup = () => {
     levelsLength
   };
 };
-var FormGroupWrapper = ({
-  children
-}) => {
+var FormGroupWrapper = props => {
   const {
     level,
     levelsLength
@@ -411,31 +410,21 @@ var FormGroupWrapper = ({
       registerChild(level);
     }
   }, [level, registerChild]);
-  const sx = import_react.default.useMemo(() => {
-    return {
-      flexDirection: "column",
-      width: "100%",
-      gap: "md",
-      paddingLeft: ({
-        space
-      }) => {
-        if (!level || !levelsLength) {
-          return 0;
-        }
-        const value = levelsLength / level;
-        return `calc(${space["lg"]} / ${value})`;
-      }
-    };
-  }, [level, levelsLength]);
+  const sx = {
+    flexDirection: props.direction || "column",
+    width: "100%",
+    gap: 3 * (levelsLength - (level || 0)),
+    paddingX: level ? "md" : "none",
+    ...props.sx
+  };
   return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
     "aria-level": level,
+    ...props,
     sx,
-    children
+    children: props.children
   });
 };
-var FormGroup = ({
-  children
-}) => {
+var FormGroup = props => {
   const {
     level
   } = useFormGroup();
@@ -446,10 +435,10 @@ var FormGroup = ({
     },
     children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupLevelsManager, {
       children: /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupWrapper, {
-        children
+        ...props
       })
     }) : /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupWrapper, {
-      children
+      ...props
     })
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.32",
+  "version": "0.15.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.29.3",
     "@ttoss/test-utils": "^1.21.2",
-    "@ttoss/ui": "^1.31.18",
+    "@ttoss/ui": "^1.32.0",
     "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3f398d2717a3ac8f7fecf4c79c028b35f0ef45fb"
+  "gitHead": "d8d388f73b22a40e68b59c3276bb2d3b2f486225"
 }

package/src/FormGroup.tsx

@@ -2,12 +2,13 @@ import { Flex, FlexProps } from '@ttoss/ui';
 import React from 'react';
 
 type FormGroupLevelsManagerContextType = {
-  levelsLength?: number;
+  levelsLength: number;
   registerChild: (level: number) => void;
 };
 
 const FormGroupLevelsManagerContext =
   React.createContext<FormGroupLevelsManagerContextType>({
+    levelsLength: 1,
     registerChild: () => {
       return null;
     },
@@ -55,10 +56,10 @@ export const useFormGroup = () => {
 };
 
 type FormGroupProps = {
-  children: React.ReactNode;
-};
+  direction?: 'column' | 'row';
+} & FlexProps;
 
-const FormGroupWrapper = ({ children }: { children: React.ReactNode }) => {
+const FormGroupWrapper = (props: FormGroupProps) => {
   const { level, levelsLength } = useFormGroup();
 
   const { registerChild } = React.useContext(FormGroupLevelsManagerContext);
@@ -73,31 +74,22 @@ const FormGroupWrapper = ({ children }: { children: React.ReactNode }) => {
     }
   }, [level, registerChild]);
 
-  const sx: FlexProps['sx'] = React.useMemo(() => {
-    return {
-      flexDirection: 'column',
-      width: '100%',
-      gap: 'md',
-      paddingLeft: ({ space }: any) => {
-        if (!level || !levelsLength) {
-          return 0;
-        }
-
-        const value = levelsLength / level;
-
-        return `calc(${space['lg']} / ${value})`;
-      },
-    };
-  }, [level, levelsLength]);
+  const sx: FlexProps['sx'] = {
+    flexDirection: props.direction || 'column',
+    width: '100%',
+    gap: 3 * (levelsLength - (level || 0)),
+    paddingX: level ? 'md' : 'none',
+    ...props.sx,
+  };
 
   return (
-    <Flex aria-level={level} sx={sx}>
-      {children}
+    <Flex aria-level={level} {...props} sx={sx}>
+      {props.children}
     </Flex>
   );
 };
 
-export const FormGroup = ({ children }: FormGroupProps) => {
+export const FormGroup = (props: FormGroupProps) => {
   const { level } = useFormGroup();
 
   const currentLevel = level === undefined ? 0 : level + 1;
@@ -106,10 +98,10 @@ export const FormGroup = ({ children }: FormGroupProps) => {
     <FormGroupContext.Provider value={{ parentLevel: currentLevel }}>
       {currentLevel === 0 ? (
         <FormGroupLevelsManager>
-          <FormGroupWrapper>{children}</FormGroupWrapper>
+          <FormGroupWrapper {...props} />
         </FormGroupLevelsManager>
       ) : (
-        <FormGroupWrapper>{children}</FormGroupWrapper>
+        <FormGroupWrapper {...props} />
       )}
     </FormGroupContext.Provider>
   );