@ttoss/forms 0.30.3 → 0.31.0

package/dist/esm/Brazil/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-AZFECRBC.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-WUCWRQAS.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";

package/dist/esm/MultistepForm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Form, useForm, yupResolver } from "../chunk-AZFECRBC.js";
+import { Form, useForm, yupResolver } from "../chunk-WUCWRQAS.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-AZFECRBC.js → chunk-WUCWRQAS.js}

@@ -190,7 +190,8 @@ var FormField = ({
       return /* @__PURE__ */jsxs(Flex, {
         sx: {
           width: "full",
-          flexDirection: "column"
+          flexDirection: "column",
+          gap: "2"
         },
         children: [label && /* @__PURE__ */jsx3(Label, {
           "aria-disabled": disabled,
@@ -500,9 +501,169 @@ var FormFieldRadio = ({
   });
 };
 
+// src/FormFieldRadioCard.tsx
+import { Box as Box2, Flex as Flex3, Label as Label3, Radio as Radio2, Text } from "@ttoss/ui";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormFieldRadioCard = ({
+  label,
+  name,
+  direction = "column",
+  width = "full",
+  sx,
+  options,
+  tooltip,
+  ...radioProps
+}) => {
+  return /* @__PURE__ */jsx12(FormField, {
+    label,
+    name,
+    sx,
+    tooltip,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx12(Flex3, {
+        sx: {
+          flexDirection: direction,
+          gap: "4"
+        },
+        children: options.map(option => {
+          const key = `form-field-radio-${name}-${option.value}`;
+          return /* @__PURE__ */jsx12(Box2, {
+            sx: {
+              gap: "2",
+              width,
+              border: "md",
+              borderColor: "display.border.muted.default",
+              borderRadius: "md"
+            },
+            children: /* @__PURE__ */jsxs3(Label3, {
+              sx: {
+                fontSize: "md",
+                width: "100%",
+                padding: "4"
+              },
+              children: [/* @__PURE__ */jsx12(Radio2, {
+                ref: field.ref,
+                onChange: field.onChange,
+                onBlur: field.onBlur,
+                value: option.value,
+                checked: field.value === option.value,
+                name,
+                ...radioProps
+              }), /* @__PURE__ */jsxs3(Flex3, {
+                sx: {
+                  flexDirection: "column",
+                  gap: "1"
+                },
+                children: [option.label && /* @__PURE__ */jsx12(Text, {
+                  children: option.label
+                }), option.description && /* @__PURE__ */jsx12(Text, {
+                  sx: {
+                    fontSize: "sm"
+                  },
+                  children: option.description
+                })]
+              })]
+            })
+          }, key);
+        })
+      });
+    }
+  });
+};
+
+// src/FormFieldRadioCardIcony.tsx
+import { Box as Box3, Flex as Flex4, Text as Text2 } from "@ttoss/ui";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var FormFieldRadioCardIcony = ({
+  label,
+  name,
+  direction = "row",
+  width = "full",
+  sx,
+  options,
+  tooltip
+}) => {
+  return /* @__PURE__ */jsx13(FormField, {
+    label,
+    name,
+    sx,
+    tooltip,
+    render: ({
+      field
+    }) => {
+      const handleOptionClick = optionValue => {
+        field.onChange(optionValue);
+        field.onBlur();
+      };
+      return /* @__PURE__ */jsx13(Flex4, {
+        sx: {
+          flexDirection: direction,
+          gap: "4"
+        },
+        children: options.map(option => {
+          const key = `form-field-radio-card-${name}-${option.value}`;
+          const isSelected = field.value === option.value;
+          const IconComponent = option.icon;
+          return /* @__PURE__ */jsxs4(Box3, {
+            as: "button",
+            onClick: () => {
+              return handleOptionClick(option.value);
+            },
+            sx: {
+              width,
+              padding: "6",
+              border: isSelected ? "lg" : "md",
+              borderColor: isSelected ? "input.background.accent.default" : "input.border.muted.default",
+              borderRadius: "md",
+              backgroundColor: "transparent",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              cursor: "pointer",
+              transition: "all 0.2s ease-in-out"
+            },
+            children: [IconComponent && /* @__PURE__ */jsx13(Box3, {
+              sx: {
+                marginBottom: "2",
+                color: "text.primary"
+              },
+              children: /* @__PURE__ */jsx13(IconComponent, {
+                size: 24
+              })
+            }), /* @__PURE__ */jsxs4(Flex4, {
+              sx: {
+                flexDirection: "column",
+                gap: "1"
+              },
+              children: [option.label && /* @__PURE__ */jsx13(Text2, {
+                sx: {
+                  fontSize: "lg",
+                  fontWeight: "semibold",
+                  color: "text.primary"
+                },
+                children: option.label
+              }), option.description && /* @__PURE__ */jsx13(Text2, {
+                sx: {
+                  fontSize: "md",
+                  color: "text.secondary"
+                },
+                children: option.description
+              })]
+            })]
+          }, key);
+        })
+      });
+    }
+  });
+};
+
 // src/FormFieldSelect.tsx
 import { Select } from "@ttoss/ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var FormFieldSelect = ({
   label,
   name,
@@ -514,7 +675,7 @@ var FormFieldSelect = ({
   tooltip,
   ...selectProps
 }) => {
-  return /* @__PURE__ */jsx12(FormField, {
+  return /* @__PURE__ */jsx14(FormField, {
     name,
     label,
     id,
@@ -529,7 +690,7 @@ var FormFieldSelect = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx12(Select, {
+      return /* @__PURE__ */jsx14(Select, {
         ...selectProps,
         ...field,
         isDisabled: disabled,
@@ -541,7 +702,7 @@ var FormFieldSelect = ({
 
 // src/FormFieldSwitch.tsx
 import { Switch as Switch2 } from "@ttoss/ui";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var FormFieldSwitch = ({
   label,
   name,
@@ -549,7 +710,7 @@ var FormFieldSwitch = ({
   tooltip,
   ...switchProps
 }) => {
-  return /* @__PURE__ */jsx13(FormField, {
+  return /* @__PURE__ */jsx15(FormField, {
     label,
     name,
     tooltip,
@@ -557,7 +718,7 @@ var FormFieldSwitch = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx13(Switch2, {
+      return /* @__PURE__ */jsx15(Switch2, {
         ...field,
         ...switchProps,
         "aria-invalid": !!fieldState.error,
@@ -569,7 +730,7 @@ var FormFieldSwitch = ({
 
 // src/FormFieldTextarea.tsx
 import { Textarea } from "@ttoss/ui";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
@@ -579,7 +740,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */jsx14(FormField, {
+  return /* @__PURE__ */jsx16(FormField, {
     label,
     name,
     id,
@@ -590,7 +751,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx14(Textarea, {
+      return /* @__PURE__ */jsx16(Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -600,9 +761,9 @@ var FormFieldTextarea = ({
 };
 
 // src/FormGroup.tsx
-import { Box as Box2, Flex as Flex3, Text } from "@ttoss/ui";
+import { Box as Box4, Flex as Flex5, Text as Text3 } from "@ttoss/ui";
 import * as React2 from "react";
-import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = React2.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -618,7 +779,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */jsx15(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */jsx17(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -662,7 +823,7 @@ var FormGroupWrapper = ({
     gap: "1",
     width: "100%"
   };
-  return /* @__PURE__ */jsxs3(Box2, {
+  return /* @__PURE__ */jsxs5(Box4, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -670,21 +831,21 @@ var FormGroupWrapper = ({
       marginBottom: "4",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */jsx15(Box2, {
+    children: [title && /* @__PURE__ */jsx17(Box4, {
       sx: {
         marginBottom: "2"
       },
-      children: /* @__PURE__ */jsx15(Text, {
+      children: /* @__PURE__ */jsx17(Text3, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */jsx15(Flex3, {
+    }), /* @__PURE__ */jsx17(Flex5, {
       sx: childrenContainerSx,
       children
-    }), name && /* @__PURE__ */jsx15(FormErrorMessage, {
+    }), name && /* @__PURE__ */jsx17(FormErrorMessage, {
       name
     })]
   });
@@ -694,15 +855,15 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */jsx15(FormGroupContext.Provider, {
+  return /* @__PURE__ */jsx17(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */jsx15(FormGroupLevelsManager, {
-      children: /* @__PURE__ */jsx15(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */jsx17(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx17(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */jsx15(FormGroupWrapper, {
+    }) : /* @__PURE__ */jsx17(FormGroupWrapper, {
       ...props
     })
   });
@@ -772,7 +933,7 @@ import * as yup from "yup";
 // src/Brazil/FormFieldCNPJ.tsx
 import { Input as Input4 } from "@ttoss/ui";
 import { PatternFormat as PatternFormat2 } from "react-number-format";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var isCnpjValid = cnpj => {
   if (cnpj?.length != 14) {
     return false;
@@ -816,7 +977,7 @@ var FormFieldCNPJ = ({
   name,
   ...patternFormatProps
 }) => {
-  return /* @__PURE__ */jsx16(FormField, {
+  return /* @__PURE__ */jsx18(FormField, {
     name,
     label,
     warning: patternFormatProps.warning,
@@ -824,7 +985,7 @@ var FormFieldCNPJ = ({
     render: ({
       field
     }) => {
-      return /* @__PURE__ */jsx16(PatternFormat2, {
+      return /* @__PURE__ */jsx18(PatternFormat2, {
         name: field.name,
         value: field.value,
         onBlur: field.onBlur,
@@ -863,4 +1024,4 @@ import * as yup2 from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Controller, FormProvider as FormProvider2, useController as useController2, useFieldArray, useForm, useFormContext as useFormContext3, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext3 as useFormContext, useFormState, useWatch };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext3 as useFormContext, useFormState, useWatch };

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-AZFECRBC.js";
-export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
+import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-WUCWRQAS.js";
+export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -98,14 +98,40 @@ type FormFieldPasswordProps<TName> = {
 } & InputPasswordProps & FormFieldProps;
 declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
 
-type FormRadioOption = {
+type FormRadioOption$2 = {
     value: string | number;
     label: string;
 };
 declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, options, tooltip, ...radioProps }: {
-    options: FormRadioOption[];
+    options: FormRadioOption$2[];
+} & FormFieldProps<TFieldValues, TName> & RadioProps) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption$1 = {
+    value: string | number;
+    label: string;
+    description?: string;
+};
+declare const FormFieldRadioCard: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, direction, width, sx, options, tooltip, ...radioProps }: {
+    options: FormRadioOption$1[];
+    direction?: "column" | "row";
+    width?: string;
 } & FormFieldProps<TFieldValues, TName> & RadioProps) => react_jsx_runtime.JSX.Element;
 
+type FormRadioOption = {
+    value: string | number;
+    label: string;
+    description?: string;
+    icon?: React$1.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+};
+declare const FormFieldRadioCardIcony: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, direction, width, sx, options, tooltip, }: {
+    options: FormRadioOption[];
+    direction?: "column" | "row";
+    width?: string;
+} & FormFieldProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
 type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
 declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, ...selectProps }: FormFieldSelectProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
 
@@ -136,4 +162,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, useFormGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.30.3",
+  "version": "0.31.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -50,12 +50,12 @@
     "react-error-boundary": "^5.0.0",
     "tsup": "^8.5.0",
     "yup": "^1.6.1",
-    "@ttoss/config": "^1.35.5",
     "@ttoss/i18n-cli": "^0.7.30",
     "@ttoss/react-i18n": "^2.0.13",
     "@ttoss/react-icons": "^0.4.13",
-    "@ttoss/ui": "^5.9.0",
-    "@ttoss/test-utils": "^2.1.25"
+    "@ttoss/test-utils": "^2.1.25",
+    "@ttoss/config": "^1.35.5",
+    "@ttoss/ui": "^5.9.0"
   },
   "publishConfig": {
     "access": "public",