@ttoss/forms 0.15.7 → 0.15.9

package/dist/esm/index.js

@@ -31,7 +31,6 @@ var Form = ({
 
 // src/FormField.tsx
 import * as React2 from "react";
-import { Box as Box2, Label } from "@ttoss/ui";
 
 // src/ErrorMessage.tsx
 import { useFormContext } from "react-hook-form";
@@ -59,12 +58,14 @@ var ErrorMessage = ({
 
 // src/FormField.tsx
 import { useController } from "react-hook-form";
+import { Flex, Label } from "@ttoss/ui";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormField = ({
   label,
   id: idProp,
   name,
   defaultValue,
+  sx,
   render
 }) => {
   const controllerReturn = useController({
@@ -80,7 +81,12 @@ var FormField = ({
       });
     });
   }, [controllerReturn, id, render]);
-  return /* @__PURE__ */jsxs(Box2, {
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */jsx3(Label, {
       htmlFor: id,
       children: label
@@ -91,12 +97,13 @@ var FormField = ({
 };
 
 // src/FormFieldCheckbox.tsx
-import { Box as Box3, Checkbox, Flex, Label as Label2 } from "@ttoss/ui";
+import { Checkbox, Flex as Flex2, Label as Label2 } from "@ttoss/ui";
 import { useController as useController2 } from "react-hook-form";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var FormFieldCheckbox = ({
   label,
   name,
+  sx,
   ...checkboxProps
 }) => {
   const {
@@ -115,8 +122,13 @@ var FormFieldCheckbox = ({
   });
   const id = `form-field-checkbox-${name}`;
   const error = !!errors[name]?.message;
-  return /* @__PURE__ */jsxs2(Box3, {
-    children: [/* @__PURE__ */jsx4(Flex, {
+  return /* @__PURE__ */jsxs2(Flex2, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [/* @__PURE__ */jsx4(Flex2, {
       sx: {
         alignItems: "center"
       },
@@ -141,14 +153,15 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { Box as Box4, Input, Label as Label3 } from "@ttoss/ui";
 import { useController as useController3 } from "react-hook-form";
+import { Flex as Flex3, Input, Label as Label3 } from "@ttoss/ui";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
   tooltip,
   onTooltipClick,
+  sx,
   ...inputProps
 }) => {
   const {
@@ -167,7 +180,12 @@ var FormFieldInput = ({
   });
   const id = `form-field-input-${name}`;
   const hasError = !!errors[name]?.message;
-  return /* @__PURE__ */jsxs3(Box4, {
+  return /* @__PURE__ */jsxs3(Flex3, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */jsx5(Label3, {
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
@@ -190,13 +208,14 @@ var FormFieldInput = ({
 };
 
 // src/FormFieldRadio.tsx
-import { Box as Box5, Label as Label4, Radio } from "@ttoss/ui";
+import { Box as Box2, Flex as Flex4, Label as Label4, Radio } from "@ttoss/ui";
 import { useController as useController4 } from "react-hook-form";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
   options,
+  sx,
   ...radioProps
 }) => {
   const {
@@ -210,10 +229,15 @@ var FormFieldRadio = ({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */jsxs4(Box5, {
+  return /* @__PURE__ */jsxs4(Flex4, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */jsx6(Label4, {
       children: label
-    }), /* @__PURE__ */jsx6(Box5, {
+    }), /* @__PURE__ */jsx6(Box2, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
         return /* @__PURE__ */jsxs4(Label4, {
@@ -237,13 +261,14 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-import { Box as Box6, Label as Label5, Select } from "@ttoss/ui";
 import { useController as useController5 } from "react-hook-form";
+import { Flex as Flex5, Label as Label5, Select } from "@ttoss/ui";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FormFieldSelect = ({
   label,
   name,
   options,
+  sx,
   ...selectProps
 }) => {
   const {
@@ -258,7 +283,12 @@ var FormFieldSelect = ({
     defaultValue: ""
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */jsxs5(Box6, {
+  return /* @__PURE__ */jsxs5(Flex5, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */jsx7(Label5, {
       htmlFor: id,
       children: label
@@ -288,6 +318,7 @@ import { jsx as jsx8 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
+  sx,
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
@@ -295,6 +326,7 @@ var FormFieldTextarea = ({
     label,
     name,
     id,
+    sx,
     render: ({
       field
     }) => {
@@ -307,7 +339,7 @@ var FormFieldTextarea = ({
 };
 
 // src/FormGroup.tsx
-import { Flex as Flex2 } from "@ttoss/ui";
+import { Flex as Flex6 } from "@ttoss/ui";
 import React3 from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
@@ -366,7 +398,7 @@ var FormGroupWrapper = props => {
     paddingX: level ? "md" : "none",
     ...props.sx
   };
-  return /* @__PURE__ */jsx9(Flex2, {
+  return /* @__PURE__ */jsx9(Flex6, {
     "aria-level": level,
     ...props,
     sx,

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import { BoxProps, CheckboxProps, InputProps, LabelProps, RadioProps, SelectProps, TextareaProps, FlexProps } from '@ttoss/ui';
+import { BoxProps, FlexProps, CheckboxProps, InputProps, LabelProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -15,20 +15,21 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
 
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, render, }: {
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, }: {
     label?: string | undefined;
     id?: string | undefined;
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName> | undefined;
+    sx?: FlexProps['sx'];
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 }) => JSX.Element;
 
-declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, ...checkboxProps }: {
+declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
     label?: string | undefined;
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, ...inputProps }: {
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, ...inputProps }: {
     label?: string | undefined;
     name: TName;
 } & InputProps & Pick<LabelProps, "tooltip" | "onTooltipClick">) => JSX.Element;
@@ -37,7 +38,7 @@ type FormRadioOption$1 = {
     value: string | number;
     label: string;
 };
-declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, ...radioProps }: {
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
     label?: string | undefined;
     name: FieldPath<TFieldValues>;
     options: FormRadioOption$1[];
@@ -47,13 +48,13 @@ type FormRadioOption = {
     value: string | number;
     label: string;
 };
-declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, ...selectProps }: {
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...selectProps }: {
     label?: string | undefined;
     name: FieldPath<TFieldValues>;
     options: FormRadioOption[];
 } & SelectProps) => JSX.Element;
 
-declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, ...textareaProps }: {
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
     label?: string | undefined;
     name: TName;
 } & TextareaProps) => JSX.Element;

package/dist/index.js

@@ -82,7 +82,6 @@ var Form = ({
 
 // src/FormField.tsx
 var React2 = __toESM(require("react"));
-var import_ui3 = require("@ttoss/ui");
 
 // src/ErrorMessage.tsx
 var import_react_hook_form2 = require("react-hook-form");
@@ -110,12 +109,14 @@ var ErrorMessage = ({
 
 // src/FormField.tsx
 var import_react_hook_form3 = require("react-hook-form");
+var import_ui3 = require("@ttoss/ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var FormField = ({
   label,
   id: idProp,
   name,
   defaultValue,
+  sx,
   render
 }) => {
   const controllerReturn = (0, import_react_hook_form3.useController)({
@@ -131,7 +132,12 @@ var FormField = ({
       });
     });
   }, [controllerReturn, id, render]);
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
       htmlFor: id,
       children: label
@@ -148,6 +154,7 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var FormFieldCheckbox = ({
   label,
   name,
+  sx,
   ...checkboxProps
 }) => {
   const {
@@ -166,7 +173,12 @@ var FormFieldCheckbox = ({
   });
   const id = `form-field-checkbox-${name}`;
   const error = !!errors[name]?.message;
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
       sx: {
         alignItems: "center"
@@ -192,14 +204,15 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-var import_ui5 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
+var import_ui5 = require("@ttoss/ui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
   tooltip,
   onTooltipClick,
+  sx,
   ...inputProps
 }) => {
   const {
@@ -218,7 +231,12 @@ var FormFieldInput = ({
   });
   const id = `form-field-input-${name}`;
   const hasError = !!errors[name]?.message;
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Label, {
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
@@ -248,6 +266,7 @@ var FormFieldRadio = ({
   label,
   name,
   options,
+  sx,
   ...radioProps
 }) => {
   const {
@@ -261,7 +280,12 @@ var FormFieldRadio = ({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Label, {
       children: label
     }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Box, {
@@ -288,13 +312,14 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-var import_ui7 = require("@ttoss/ui");
 var import_react_hook_form7 = require("react-hook-form");
+var import_ui7 = require("@ttoss/ui");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var FormFieldSelect = ({
   label,
   name,
   options,
+  sx,
   ...selectProps
 }) => {
   const {
@@ -309,7 +334,12 @@ var FormFieldSelect = ({
     defaultValue: ""
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
     children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
       htmlFor: id,
       children: label
@@ -339,6 +369,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 var FormFieldTextarea = ({
   label,
   name,
+  sx,
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
@@ -346,6 +377,7 @@ var FormFieldTextarea = ({
     label,
     name,
     id,
+    sx,
     render: ({
       field
     }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.15.7",
+  "version": "0.15.9",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.29.5",
     "@ttoss/test-utils": "^1.21.5",
-    "@ttoss/ui": "^1.32.7",
+    "@ttoss/ui": "^1.32.8",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.37",
     "jest": "^29.5.0",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f30779a5ea50d60cf3099e5fde712e1ef7b7882c"
+  "gitHead": "7eb5868534a149425c37f2b977a35cd01860eeff"
 }

package/src/FormField.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Label } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import {
   FieldPath,
@@ -8,6 +7,7 @@ import {
   UseControllerReturn,
   useController,
 } from 'react-hook-form';
+import { Flex, type FlexProps, Label } from '@ttoss/ui';
 
 export const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -17,12 +17,14 @@ export const FormField = <
   id: idProp,
   name,
   defaultValue,
+  sx,
   render,
 }: {
   label?: string;
   id?: string;
   name: TName;
   defaultValue?: FieldPathValue<TFieldValues, TName>;
+  sx?: FlexProps['sx'];
   render: (
     props: UseControllerReturn<TFieldValues, TName>
   ) => React.ReactElement;
@@ -41,10 +43,10 @@ export const FormField = <
   }, [controllerReturn, id, render]);
 
   return (
-    <Box>
+    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
       {label && <Label htmlFor={id}>{label}</Label>}
       {memoizedRender}
       <ErrorMessage name={name} />
-    </Box>
+    </Flex>
   );
 };

package/src/FormFieldCheckbox.tsx

@@ -1,4 +1,4 @@
-import { Box, Checkbox, type CheckboxProps, Flex, Label } from '@ttoss/ui';
+import { Checkbox, type CheckboxProps, Flex, Label } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
 
@@ -7,6 +7,7 @@ export const FormFieldCheckbox = <
 >({
   label,
   name,
+  sx,
   ...checkboxProps
 }: {
   label?: string;
@@ -25,7 +26,7 @@ export const FormFieldCheckbox = <
   const error = !!errors[name]?.message;
 
   return (
-    <Box>
+    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
       <Flex sx={{ alignItems: 'center' }}>
         <Label aria-disabled={checkboxProps.disabled} htmlFor={id}>
           <Checkbox
@@ -42,6 +43,6 @@ export const FormFieldCheckbox = <
         </Label>
       </Flex>
       <ErrorMessage name={name} />
-    </Box>
+    </Flex>
   );
 };

package/src/FormFieldInput.tsx

@@ -1,6 +1,12 @@
-import { Box, Input, type InputProps, Label, type LabelProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
+import {
+  Flex,
+  Input,
+  type InputProps,
+  Label,
+  type LabelProps,
+} from '@ttoss/ui';
 
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
@@ -10,6 +16,7 @@ export const FormFieldInput = <
   name,
   tooltip,
   onTooltipClick,
+  sx,
   ...inputProps
 }: {
   label?: string;
@@ -29,7 +36,7 @@ export const FormFieldInput = <
   const hasError = !!errors[name]?.message;
 
   return (
-    <Box>
+    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
       {label && (
         <Label
           aria-disabled={inputProps.disabled}
@@ -53,6 +60,6 @@ export const FormFieldInput = <
       />
 
       <ErrorMessage name={name} />
-    </Box>
+    </Flex>
   );
 };

package/src/FormFieldRadio.tsx

@@ -1,4 +1,4 @@
-import { Box, Label, Radio, type RadioProps } from '@ttoss/ui';
+import { Box, Flex, Label, Radio, type RadioProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
 
@@ -11,6 +11,7 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
   label,
   name,
   options,
+  sx,
   ...radioProps
 }: {
   label?: string;
@@ -25,7 +26,7 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
   });
 
   return (
-    <Box>
+    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
       {label && <Label>{label}</Label>}
       <Box>
         {options.map((option) => {
@@ -50,6 +51,6 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
       </Box>
 
       <ErrorMessage name={name} />
-    </Box>
+    </Flex>
   );
 };

package/src/FormFieldSelect.tsx

@@ -1,6 +1,6 @@
-import { Box, Label, Select, type SelectProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
+import { Flex, Label, Select, type SelectProps } from '@ttoss/ui';
 
 type FormRadioOption = {
   value: string | number;
@@ -13,6 +13,7 @@ export const FormFieldSelect = <
   label,
   name,
   options,
+  sx,
   ...selectProps
 }: {
   label?: string;
@@ -29,7 +30,7 @@ export const FormFieldSelect = <
   const id = `form-field-select-${name}`;
 
   return (
-    <Box>
+    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
       {label && <Label htmlFor={id}>{label}</Label>}
       <Select
         ref={ref}
@@ -49,6 +50,6 @@ export const FormFieldSelect = <
         })}
       </Select>
       <ErrorMessage name={name} />
-    </Box>
+    </Flex>
   );
 };

package/src/FormFieldTextarea.tsx

@@ -8,6 +8,7 @@ export const FormFieldTextarea = <
 >({
   label,
   name,
+  sx,
   ...textareaProps
 }: {
   label?: string;
@@ -20,6 +21,7 @@ export const FormFieldTextarea = <
       label={label}
       name={name}
       id={id}
+      sx={sx}
       render={({ field }) => {
         return <Textarea {...field} {...textareaProps} />;
       }}