@ttoss/forms 0.16.1 → 0.16.2

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: () => {
@@ -404,8 +404,7 @@ var useFormGroup = () => {
 };
 var FormGroupWrapper = props => {
   const {
-    level,
-    levelsLength
+    level
   } = useFormGroup();
   const {
     registerChild
@@ -417,16 +416,32 @@ var FormGroupWrapper = props => {
   }, [level, registerChild]);
   const sx = {
     flexDirection: props.direction || "column",
+    gap: "md",
     width: "100%",
-    gap: 3 * (levelsLength - (level || 0)),
-    paddingX: level ? "md" : "none",
     ...props.sx
   };
-  return /* @__PURE__ */jsx9(Flex6, {
+  return /* @__PURE__ */jsxs6(Box3, {
     "aria-level": level,
-    ...props,
-    sx,
-    children: props.children
+    sx: {
+      marginBottom: "2xl",
+      marginX: level === 0 ? "none" : "md"
+    },
+    children: [props.title && /* @__PURE__ */jsx9(Box3, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: /* @__PURE__ */jsx9(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold"
+        },
+        children: props.title
+      })
+    }), /* @__PURE__ */jsx9(Flex6, {
+      ...props,
+      sx,
+      children: props.children
+    })]
   });
 };
 var FormGroup = props => {

package/dist/index.d.ts

@@ -69,6 +69,7 @@ declare const useFormGroup: () => {
     levelsLength: number;
 };
 type FormGroupProps = {
+    title?: string;
     direction?: 'column' | 'row';
 } & FlexProps;
 declare const FormGroup: (props: FormGroupProps) => JSX.Element;

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,14 +440,14 @@ 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
@@ -455,29 +455,44 @@ var useFormGroup = () => {
 };
 var FormGroupWrapper = props => {
   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",
+    gap: "md",
     width: "100%",
-    gap: 3 * (levelsLength - (level || 0)),
-    paddingX: level ? "md" : "none",
     ...props.sx
   };
-  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
+    sx: {
+      marginBottom: "2xl",
+      marginX: level === 0 ? "none" : "md"
+    },
+    children: [props.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: props.title
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
+      ...props,
+      sx,
+      children: props.children
+    })]
   });
 };
 var FormGroup = props => {

package/package.json

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

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, Flex, FlexProps, Text } from '@ttoss/ui';
 
 type FormGroupLevelsManagerContextType = {
   levelsLength: number;
@@ -56,11 +56,12 @@ export const useFormGroup = () => {
 };
 
 type FormGroupProps = {
+  title?: string;
   direction?: 'column' | 'row';
 } & FlexProps;
 
 const FormGroupWrapper = (props: FormGroupProps) => {
-  const { level, levelsLength } = useFormGroup();
+  const { level } = useFormGroup();
 
   const { registerChild } = React.useContext(FormGroupLevelsManagerContext);
 
@@ -76,16 +77,35 @@ const FormGroupWrapper = (props: FormGroupProps) => {
 
   const sx: FlexProps['sx'] = {
     flexDirection: props.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}
+      sx={{
+        marginBottom: '2xl',
+        marginX: level === 0 ? 'none' : 'md',
+      }}
+    >
+      {props.title && (
+        <Box sx={{ marginBottom: 'md' }}>
+          <Text
+            sx={{
+              fontSize: '2xl',
+              fontWeight: 'bold',
+            }}
+          >
+            {props.title}
+          </Text>
+        </Box>
+      )}
+      <Flex {...props} sx={sx}>
+        {props.children}
+      </Flex>
+    </Box>
   );
 };