@lets-events/react 11.4.1 → 11.5.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.4.1 build
+> @lets-events/react@11.5.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist\index.js 299.90 KB
-CJS ⚡️ Build success in 233ms
-ESM dist\index.mjs 289.83 KB
-ESM ⚡️ Build success in 235ms
+ESM dist\index.mjs 292.77 KB
+ESM ⚡️ Build success in 228ms
+CJS dist\index.js 303.05 KB
+CJS ⚡️ Build success in 228ms
 DTS Build start
-DTS ⚡️ Build success in 4108ms
-DTS dist\index.d.mts 387.93 KB
-DTS dist\index.d.ts  387.93 KB
+DTS ⚡️ Build success in 4041ms
+DTS dist\index.d.mts 388.35 KB
+DTS dist\index.d.ts  388.35 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.5.1
+
+### Patch Changes
+
+- fix: text area form field props
+
+## 11.5.0
+
+### Minor Changes
+
+- Phone Input added
+
 ## 11.4.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -14,6 +14,7 @@ import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { FieldError, Merge, FieldErrorsImpl, UseFormProps, SubmitHandler, FieldValues } from 'react-hook-form';
+import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14882,8 +14883,9 @@ type TextAreaFormFieldProps = {
     label?: string;
     required?: boolean;
     placeholder?: string;
+    fieldProps?: TextareaFieldProps;
 };
-declare const TextAreaFormField: ({ name, label, required, placeholder, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextAreaFormField: ({ name, label, required, placeholder, fieldProps, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type TextFormFieldProps = {
     name: string;
@@ -14906,4 +14908,12 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };
+type PhoneFormFieldProps = PhoneInputProps & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    defaultCountry?: string;
+};
+declare const PhoneFormField: ({ name, label, required, defaultCountry, ...props }: PhoneFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { FieldError, Merge, FieldErrorsImpl, UseFormProps, SubmitHandler, FieldValues } from 'react-hook-form';
+import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14882,8 +14883,9 @@ type TextAreaFormFieldProps = {
     label?: string;
     required?: boolean;
     placeholder?: string;
+    fieldProps?: TextareaFieldProps;
 };
-declare const TextAreaFormField: ({ name, label, required, placeholder, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextAreaFormField: ({ name, label, required, placeholder, fieldProps, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type TextFormFieldProps = {
     name: string;
@@ -14906,4 +14908,12 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };
+type PhoneFormFieldProps = PhoneInputProps & {
+    name: string;
+    label?: string;
+    required?: boolean;
+    defaultCountry?: string;
+};
+declare const PhoneFormField: ({ name, label, required, defaultCountry, ...props }: PhoneFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, maskFormat, maskUnformat, useToast };

package/dist/index.js

@@ -1055,6 +1055,7 @@ __export(index_exports, {
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
   MultiSelectFormField: () => MultiSelectFormField,
+  PhoneFormField: () => PhoneFormField,
   RadioGroup: () => RadioGroup,
   RadioGroupStyled: () => RadioGroupStyled,
   RadioItem: () => RadioItem,
@@ -9653,7 +9654,8 @@ var TextAreaFormField = ({
   name,
   label,
   required,
-  placeholder
+  placeholder,
+  fieldProps
 }) => {
   var _a;
   const {
@@ -9674,7 +9676,7 @@ var TextAreaFormField = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       TextareaField,
-      __spreadProps(__spreadValues({}, register(name, { required })), {
+      __spreadProps(__spreadValues(__spreadValues({}, fieldProps), register(name, { required })), {
         placeholder,
         color: haveError ? "error" : "default",
         "aria-labelledby": `${name}-label`
@@ -9784,6 +9786,130 @@ var MultiSelectFormField = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/PhoneFormField.tsx
+var import_react_hook_form5 = require("react-hook-form");
+var import_react_international_phone = require("react-international-phone");
+var import_style = require("react-international-phone/style.css");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var PhoneFormInput = styled(import_react_international_phone.PhoneInput, {
+  $$borderColor: "$colors$neutral300",
+  boxSizing: "border-box",
+  borderRadius: "$sm",
+  display: "flex",
+  flex: 1,
+  fontFamily: "$default",
+  color: "$dark500",
+  img: {
+    width: "$18",
+    height: "$18",
+    marginLeft: "$8"
+  },
+  ul: {
+    border: "none"
+  },
+  input: {
+    height: "$40 !important",
+    flex: 1,
+    borderColor: "$$borderColor  !important",
+    borderTopRightRadius: "$sm !important",
+    borderBottomRightRadius: "$sm !important",
+    fontSize: "inherit !important",
+    "&:focus": {
+      $$borderColor: "$colors$brand300"
+    }
+  },
+  button: {
+    height: "$40 !important",
+    borderRight: "none",
+    borderTopLeftRadius: "$sm !important",
+    borderBottomLeftRadius: "$sm !important",
+    borderColor: "$$borderColor  !important",
+    marginRight: "0 !important",
+    "&:active": {
+      $$borderColor: "$colors$brand300"
+    },
+    div: {
+      padding: "auto $12",
+      gap: " $8px"
+    }
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    $$borderColor: "$colors$dark200",
+    cursor: "not-allowed",
+    img: {
+      opacity: 0.6
+    },
+    button: {
+      $$borderColor: "$colors$dark200"
+    }
+  },
+  variants: {
+    typography: typographyValues,
+    color: {
+      default: {
+        $$borderColor: "$colors$neutral300"
+      },
+      error: {
+        $$borderColor: "$colors$error600"
+      }
+    }
+  },
+  defaultVariants: {
+    typography: "labelSmall",
+    color: "default"
+  }
+});
+var PhoneFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    defaultCountry = "br"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "defaultCountry"
+  ]);
+  var _a2;
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    watch
+  } = (0, import_react_hook_form5.useFormContext)();
+  const haveError = !!errors[name];
+  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const handlePhoneChange = (phone) => {
+    setValue(name, phone);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      PhoneFormInput,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, register(name, { required })), {
+        defaultCountry,
+        value: watch(name),
+        color: haveError ? "error" : "default",
+        onChange: handlePhoneChange
+      }), props), {
+        "aria-labelledby": `${name}-label`
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -9830,6 +9956,7 @@ var MultiSelectFormField = (_a) => {
   Modal,
   MultiSelect,
   MultiSelectFormField,
+  PhoneFormField,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,

package/dist/index.mjs

@@ -9562,7 +9562,8 @@ var TextAreaFormField = ({
   name,
   label,
   required,
-  placeholder
+  placeholder,
+  fieldProps
 }) => {
   var _a;
   const {
@@ -9583,7 +9584,7 @@ var TextAreaFormField = ({
     ),
     /* @__PURE__ */ jsx32(
       TextareaField,
-      __spreadProps(__spreadValues({}, register(name, { required })), {
+      __spreadProps(__spreadValues(__spreadValues({}, fieldProps), register(name, { required })), {
         placeholder,
         color: haveError ? "error" : "default",
         "aria-labelledby": `${name}-label`
@@ -9696,6 +9697,130 @@ var MultiSelectFormField = (_a) => {
     /* @__PURE__ */ jsx35(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/PhoneFormField.tsx
+import { useFormContext as useFormContext4 } from "react-hook-form";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var PhoneFormInput = styled(PhoneInput, {
+  $$borderColor: "$colors$neutral300",
+  boxSizing: "border-box",
+  borderRadius: "$sm",
+  display: "flex",
+  flex: 1,
+  fontFamily: "$default",
+  color: "$dark500",
+  img: {
+    width: "$18",
+    height: "$18",
+    marginLeft: "$8"
+  },
+  ul: {
+    border: "none"
+  },
+  input: {
+    height: "$40 !important",
+    flex: 1,
+    borderColor: "$$borderColor  !important",
+    borderTopRightRadius: "$sm !important",
+    borderBottomRightRadius: "$sm !important",
+    fontSize: "inherit !important",
+    "&:focus": {
+      $$borderColor: "$colors$brand300"
+    }
+  },
+  button: {
+    height: "$40 !important",
+    borderRight: "none",
+    borderTopLeftRadius: "$sm !important",
+    borderBottomLeftRadius: "$sm !important",
+    borderColor: "$$borderColor  !important",
+    marginRight: "0 !important",
+    "&:active": {
+      $$borderColor: "$colors$brand300"
+    },
+    div: {
+      padding: "auto $12",
+      gap: " $8px"
+    }
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    $$borderColor: "$colors$dark200",
+    cursor: "not-allowed",
+    img: {
+      opacity: 0.6
+    },
+    button: {
+      $$borderColor: "$colors$dark200"
+    }
+  },
+  variants: {
+    typography: typographyValues,
+    color: {
+      default: {
+        $$borderColor: "$colors$neutral300"
+      },
+      error: {
+        $$borderColor: "$colors$error600"
+      }
+    }
+  },
+  defaultVariants: {
+    typography: "labelSmall",
+    color: "default"
+  }
+});
+var PhoneFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    defaultCountry = "br"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "defaultCountry"
+  ]);
+  var _a2;
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    watch
+  } = useFormContext4();
+  const haveError = !!errors[name];
+  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const handlePhoneChange = (phone) => {
+    setValue(name, phone);
+  };
+  return /* @__PURE__ */ jsxs20(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ jsx36(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ jsx36(
+      PhoneFormInput,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, register(name, { required })), {
+        defaultCountry,
+        value: watch(name),
+        color: haveError ? "error" : "default",
+        onChange: handlePhoneChange
+      }), props), {
+        "aria-labelledby": `${name}-label`
+      })
+    ),
+    /* @__PURE__ */ jsx36(ErrorFormMessage, { message: errorMsg })
+  ] });
+};
 export {
   Alert,
   AlertDialogCompleteStyled,
@@ -9741,6 +9866,7 @@ export {
   Modal,
   MultiSelect,
   MultiSelectFormField,
+  PhoneFormField,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.4.1",
+  "version": "11.5.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -40,6 +40,7 @@
     "npm": "^11.4.2",
     "radix-ui": "^1.4.2",
     "react-day-picker": "^9.6.7",
-    "react-hook-form": "^7.57.0"
+    "react-hook-form": "^7.57.0",
+    "react-international-phone": "^4.5.0"
   }
 }

package/src/components/FormFields/PhoneFormField.tsx

@@ -0,0 +1,130 @@
+import { useFormContext } from 'react-hook-form'
+import { Flex } from '../Flex'
+import { FormLabel } from './FormLabel'
+import { ErrorFormMessage } from './ErrorFormMessage'
+import { PhoneInput, PhoneInputProps } from 'react-international-phone'
+import { styled } from '../../styles'
+import { typographyValues } from '../../types/typographyValues'
+import 'react-international-phone/style.css'
+
+export type PhoneFormFieldProps = PhoneInputProps & {
+  name: string
+  label?: string
+  required?: boolean
+  defaultCountry?: string
+}
+const PhoneFormInput = styled(PhoneInput, {
+  $$borderColor: '$colors$neutral300',
+  boxSizing: 'border-box',
+  borderRadius: '$sm',
+  display: 'flex',
+  flex: 1,
+  fontFamily: '$default',
+  color: '$dark500',
+
+  img: {
+    width: '$18',
+    height: '$18',
+    marginLeft: '$8',
+  },
+  ul: {
+    border: 'none',
+  },
+  input: {
+    height: '$40 !important',
+    flex: 1,
+    borderColor: '$$borderColor  !important',
+    borderTopRightRadius: '$sm !important',
+    borderBottomRightRadius: '$sm !important',
+    fontSize: 'inherit !important',
+    '&:focus': {
+      $$borderColor: '$colors$brand300',
+    },
+  },
+  button: {
+    height: '$40 !important',
+    borderRight: 'none',
+    borderTopLeftRadius: '$sm !important',
+    borderBottomLeftRadius: '$sm !important',
+    borderColor: '$$borderColor  !important',
+    marginRight: '0 !important',
+    '&:active': {
+      $$borderColor: '$colors$brand300',
+    },
+    div: {
+      padding: 'auto $12',
+      gap: ' $8px',
+    },
+  },
+
+  '&:has(input:disabled)': {
+    backgroundColor: '$dark100',
+    color: '$dark400',
+    $$borderColor: '$colors$dark200',
+    cursor: 'not-allowed',
+    img: {
+      opacity: 0.6,
+    },
+    button: {
+      $$borderColor: '$colors$dark200',
+    },
+  },
+  variants: {
+    typography: typographyValues,
+    color: {
+      default: {
+        $$borderColor: '$colors$neutral300',
+      },
+      error: {
+        $$borderColor: '$colors$error600',
+      },
+    },
+  },
+  defaultVariants: {
+    typography: 'labelSmall',
+    color: 'default',
+  },
+})
+
+export const PhoneFormField = ({
+  name,
+  label,
+  required,
+  defaultCountry = 'br',
+  ...props
+}: PhoneFormFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useFormContext()
+
+  const haveError = !!errors[name]
+  const errorMsg = errors[name]?.message
+
+  const handlePhoneChange = (phone: string) => {
+    setValue(name, phone)
+  }
+
+  return (
+    <Flex direction={'column'}>
+      <FormLabel
+        name={name}
+        label={label}
+        required={required}
+        haveError={haveError}
+      />
+      <PhoneFormInput
+        {...register(name, { required })}
+        defaultCountry={defaultCountry}
+        value={watch(name)}
+        color={haveError ? 'error' : 'default'}
+        onChange={handlePhoneChange}
+        {...props}
+        aria-labelledby={`${name}-label`}
+      />
+      <ErrorFormMessage message={errorMsg} />
+    </Flex>
+  )
+}

package/src/components/FormFields/TextAreaFormField.tsx

@@ -2,13 +2,14 @@ import { useFormContext } from "react-hook-form";
 import { Flex } from "../Flex";
 import { FormLabel } from "./FormLabel";
 import { ErrorFormMessage } from "./ErrorFormMessage";
-import { TextareaField } from "../TextareaField";
+import { TextareaField, TextareaFieldProps } from "../TextareaField";
 
 export type TextAreaFormFieldProps = {
   name: string;
   label?: string;
   required?: boolean;
   placeholder?: string;
+  fieldProps?: TextareaFieldProps;
 };
 
 export const TextAreaFormField = ({
@@ -16,6 +17,7 @@ export const TextAreaFormField = ({
   label,
   required,
   placeholder,
+  fieldProps,
 }: TextAreaFormFieldProps) => {
   const {
     register,
@@ -35,6 +37,7 @@ export const TextAreaFormField = ({
         haveError={haveError}
       />
       <TextareaField
+        {...fieldProps}
         {...register(name, { required })}
         placeholder={placeholder}
         color={haveError ? "error" : "default"}

package/src/index.tsx

@@ -42,3 +42,4 @@ export * from "./components/FormFields/TextAreaFormField";
 export * from "./components/FormFields/TextFormField";
 export * from "./components/FormFields/Form";
 export * from "./components/FormFields/MultiSelectFormField";
+export * from "./components/FormFields/PhoneFormField";