@ttoss/forms 0.16.1 → 0.16.3

package/dist/esm/index.js

@@ -363,9 +363,9 @@ var FormFieldTextarea = ({
 };
 
 // src/FormGroup.tsx
-import { Flex as Flex6 } from "@ttoss/ui";
-import React3 from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import * as React3 from "react";
+import { Box as Box3, Flex as Flex6, Text } from "@ttoss/ui";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -402,10 +402,14 @@ var useFormGroup = () => {
     levelsLength
   };
 };
-var FormGroupWrapper = props => {
+var FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}) => {
   const {
-    level,
-    levelsLength
+    level
   } = useFormGroup();
   const {
     registerChild
@@ -415,18 +419,34 @@ var FormGroupWrapper = props => {
       registerChild(level);
     }
   }, [level, registerChild]);
-  const sx = {
-    flexDirection: props.direction || "column",
-    width: "100%",
-    gap: 3 * (levelsLength - (level || 0)),
-    paddingX: level ? "md" : "none",
-    ...props.sx
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "md",
+    width: "100%"
   };
-  return /* @__PURE__ */jsx9(Flex6, {
+  return /* @__PURE__ */jsxs6(Box3, {
     "aria-level": level,
-    ...props,
-    sx,
-    children: props.children
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "lg",
+      marginBottom: "lg",
+      ...boxProps.sx
+    },
+    children: [title && /* @__PURE__ */jsx9(Box3, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: /* @__PURE__ */jsx9(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold"
+        },
+        children: title
+      })
+    }), /* @__PURE__ */jsx9(Flex6, {
+      sx: childrenContainerSx,
+      children
+    })]
   });
 };
 var FormGroup = props => {

package/dist/index.d.ts

@@ -69,8 +69,9 @@ declare const useFormGroup: () => {
     levelsLength: number;
 };
 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

@@ -414,10 +414,10 @@ var FormFieldTextarea = ({
 };
 
 // src/FormGroup.tsx
+var React3 = __toESM(require("react"));
 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({
+var FormGroupLevelsManagerContext = React3.createContext({
   levelsLength: 1,
   registerChild: () => {
     return null;
@@ -426,8 +426,8 @@ var FormGroupLevelsManagerContext = import_react.default.createContext({
 var FormGroupLevelsManager = ({
   children
 }) => {
-  const [levelsLength, setLevelsLength] = import_react.default.useState(0);
-  const registerChild = import_react.default.useCallback(level => {
+  const [levelsLength, setLevelsLength] = React3.useState(0);
+  const registerChild = React3.useCallback(level => {
     if (level + 1 > levelsLength) {
       setLevelsLength(level + 1);
     }
@@ -440,44 +440,64 @@ var FormGroupLevelsManager = ({
     children
   });
 };
-var FormGroupContext = import_react.default.createContext({});
+var FormGroupContext = React3.createContext({});
 var useFormGroup = () => {
   const {
     parentLevel
-  } = import_react.default.useContext(FormGroupContext);
+  } = React3.useContext(FormGroupContext);
   const {
     levelsLength
-  } = import_react.default.useContext(FormGroupLevelsManagerContext);
+  } = React3.useContext(FormGroupLevelsManagerContext);
   return {
     level: parentLevel,
     levelsLength
   };
 };
-var FormGroupWrapper = props => {
+var FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}) => {
   const {
-    level,
-    levelsLength
+    level
   } = useFormGroup();
   const {
     registerChild
-  } = import_react.default.useContext(FormGroupLevelsManagerContext);
-  import_react.default.useEffect(() => {
+  } = React3.useContext(FormGroupLevelsManagerContext);
+  React3.useEffect(() => {
     if (typeof level === "number") {
       registerChild(level);
     }
   }, [level, registerChild]);
-  const sx = {
-    flexDirection: props.direction || "column",
-    width: "100%",
-    gap: 3 * (levelsLength - (level || 0)),
-    paddingX: level ? "md" : "none",
-    ...props.sx
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "md",
+    width: "100%"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsxs)(import_ui9.Box, {
     "aria-level": level,
-    ...props,
-    sx,
-    children: props.children
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "lg",
+      marginBottom: "lg",
+      ...boxProps.sx
+    },
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Box, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold"
+        },
+        children: title
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
+      sx: childrenContainerSx,
+      children
+    })]
   });
 };
 var FormGroup = props => {

package/package.json

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

package/src/FormGroup.tsx

@@ -1,5 +1,5 @@
-import { Flex, FlexProps } from '@ttoss/ui';
-import React from 'react';
+import * as React from 'react';
+import { Box, BoxProps, Flex, FlexProps, Text } from '@ttoss/ui';
 
 type FormGroupLevelsManagerContextType = {
   levelsLength: number;
@@ -56,11 +56,17 @@ export const useFormGroup = () => {
 };
 
 type FormGroupProps = {
+  title?: string;
   direction?: 'column' | 'row';
-} & FlexProps;
+} & BoxProps;
 
-const FormGroupWrapper = (props: FormGroupProps) => {
-  const { level, levelsLength } = useFormGroup();
+const FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}: FormGroupProps) => {
+  const { level } = useFormGroup();
 
   const { registerChild } = React.useContext(FormGroupLevelsManagerContext);
 
@@ -74,18 +80,36 @@ 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%',
-    gap: 3 * (levelsLength - (level || 0)),
-    paddingX: level ? 'md' : 'none',
-    ...props.sx,
   };
 
   return (
-    <Flex aria-level={level} {...props} sx={sx}>
-      {props.children}
-    </Flex>
+    <Box
+      aria-level={level}
+      {...boxProps}
+      sx={{
+        marginTop: level === 0 ? 'none' : 'lg',
+        marginBottom: 'lg',
+        ...boxProps.sx,
+      }}
+    >
+      {title && (
+        <Box sx={{ marginBottom: 'md' }}>
+          <Text
+            sx={{
+              fontSize: '2xl',
+              fontWeight: 'bold',
+            }}
+          >
+            {title}
+          </Text>
+        </Box>
+      )}
+      <Flex sx={childrenContainerSx}>{children}</Flex>
+    </Box>
   );
 };