@lets-events/react 11.5.2 → 11.5.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.5.2 build
+> @lets-events/react@11.5.4 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 303.05 KB
-CJS ⚡️ Build success in 229ms
-ESM dist\index.mjs 292.77 KB
-ESM ⚡️ Build success in 230ms
+ESM dist\index.mjs 290.94 KB
+ESM ⚡️ Build success in 223ms
+CJS dist\index.js 301.13 KB
+CJS ⚡️ Build success in 223ms
 DTS Build start
-DTS ⚡️ Build success in 4079ms
-DTS dist\index.d.mts 388.35 KB
-DTS dist\index.d.ts  388.35 KB
+DTS ⚡️ Build success in 3952ms
+DTS dist\index.d.mts 388.25 KB
+DTS dist\index.d.ts  388.25 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.5.4
+
+### Patch Changes
+
+- add text-area-field props to form field
+
+## 11.5.3
+
+### Patch Changes
+
+- rm react international phone
+
 ## 11.5.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -14,7 +14,6 @@ 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;
@@ -14878,14 +14877,13 @@ type FormLabelProps = {
 };
 declare const FormLabel: ({ name, label, haveError, required, }: FormLabelProps) => react_jsx_runtime.JSX.Element | null;
 
-type TextAreaFormFieldProps = {
+type TextAreaFormFieldProps = TextareaFieldProps & {
     name: string;
     label?: string;
     required?: boolean;
     placeholder?: string;
-    fieldProps?: TextareaFieldProps;
 };
-declare const TextAreaFormField: ({ name, label, required, placeholder, fieldProps, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextAreaFormField: ({ name, label, required, placeholder, ...props }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type TextFormFieldProps = {
     name: string;
@@ -14908,7 +14906,7 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type PhoneFormFieldProps = PhoneInputProps & {
+type PhoneFormFieldProps = {
     name: string;
     label?: string;
     required?: boolean;

package/dist/index.d.ts

@@ -14,7 +14,6 @@ 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;
@@ -14878,14 +14877,13 @@ type FormLabelProps = {
 };
 declare const FormLabel: ({ name, label, haveError, required, }: FormLabelProps) => react_jsx_runtime.JSX.Element | null;
 
-type TextAreaFormFieldProps = {
+type TextAreaFormFieldProps = TextareaFieldProps & {
     name: string;
     label?: string;
     required?: boolean;
     placeholder?: string;
-    fieldProps?: TextareaFieldProps;
 };
-declare const TextAreaFormField: ({ name, label, required, placeholder, fieldProps, }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextAreaFormField: ({ name, label, required, placeholder, ...props }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type TextFormFieldProps = {
     name: string;
@@ -14908,7 +14906,7 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type PhoneFormFieldProps = PhoneInputProps & {
+type PhoneFormFieldProps = {
     name: string;
     label?: string;
     required?: boolean;

package/dist/index.js

@@ -9650,20 +9650,25 @@ var FormLabel = ({
 // src/components/FormFields/TextAreaFormField.tsx
 var import_react_hook_form = require("react-hook-form");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var TextAreaFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  fieldProps
-}) => {
-  var _a;
+var TextAreaFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    placeholder
+  } = _b, props = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "placeholder"
+  ]);
+  var _a2;
   const {
     register,
     formState: { errors }
   } = (0, import_react_hook_form.useFormContext)();
   const haveError = !!errors[name];
-  const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
+  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex2, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       FormLabel,
@@ -9676,7 +9681,7 @@ var TextAreaFormField = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       TextareaField,
-      __spreadProps(__spreadValues(__spreadValues({}, fieldProps), register(name, { required })), {
+      __spreadProps(__spreadValues(__spreadValues({}, props), register(name, { required })), {
         placeholder,
         color: haveError ? "error" : "default",
         "aria-labelledby": `${name}-label`
@@ -9789,79 +9794,7 @@ var MultiSelectFormField = (_a) => {
 
 // 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,
@@ -9896,17 +9829,6 @@ var PhoneFormField = (_a) => {
         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 })
   ] });
 };

package/dist/index.mjs

@@ -9558,20 +9558,25 @@ var FormLabel = ({
 // src/components/FormFields/TextAreaFormField.tsx
 import { useFormContext } from "react-hook-form";
 import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
-var TextAreaFormField = ({
-  name,
-  label,
-  required,
-  placeholder,
-  fieldProps
-}) => {
-  var _a;
+var TextAreaFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required,
+    placeholder
+  } = _b, props = __objRest(_b, [
+    "name",
+    "label",
+    "required",
+    "placeholder"
+  ]);
+  var _a2;
   const {
     register,
     formState: { errors }
   } = useFormContext();
   const haveError = !!errors[name];
-  const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
+  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsxs17(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx32(
       FormLabel,
@@ -9584,7 +9589,7 @@ var TextAreaFormField = ({
     ),
     /* @__PURE__ */ jsx32(
       TextareaField,
-      __spreadProps(__spreadValues(__spreadValues({}, fieldProps), register(name, { required })), {
+      __spreadProps(__spreadValues(__spreadValues({}, props), register(name, { required })), {
         placeholder,
         color: haveError ? "error" : "default",
         "aria-labelledby": `${name}-label`
@@ -9700,79 +9705,7 @@ var MultiSelectFormField = (_a) => {
 
 // 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,
@@ -9807,17 +9740,6 @@ var PhoneFormField = (_a) => {
         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 })
   ] });
 };

package/package.json

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

package/src/components/FormFields/PhoneFormField.tsx

@@ -1,96 +1,96 @@
-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'
+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',
+export type PhoneFormFieldProps = {
+  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',
-    },
-  },
+//   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',
-  },
-})
+//   '&: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',
+  defaultCountry = "br",
   ...props
 }: PhoneFormFieldProps) => {
   const {
@@ -98,24 +98,24 @@ export const PhoneFormField = ({
     formState: { errors },
     setValue,
     watch,
-  } = useFormContext()
+  } = useFormContext();
 
-  const haveError = !!errors[name]
-  const errorMsg = errors[name]?.message
+  const haveError = !!errors[name];
+  const errorMsg = errors[name]?.message;
 
   const handlePhoneChange = (phone: string) => {
-    setValue(name, phone)
-  }
+    setValue(name, phone);
+  };
 
   return (
-    <Flex direction={'column'}>
+    <Flex direction={"column"}>
       <FormLabel
         name={name}
         label={label}
         required={required}
         haveError={haveError}
       />
-      <PhoneFormInput
+      {/* <PhoneFormInput
         {...register(name, { required })}
         defaultCountry={defaultCountry}
         value={watch(name)}
@@ -123,8 +123,8 @@ export const PhoneFormField = ({
         onChange={handlePhoneChange}
         {...props}
         aria-labelledby={`${name}-label`}
-      />
+      /> */}
       <ErrorFormMessage message={errorMsg} />
     </Flex>
-  )
-}
+  );
+};

package/src/components/FormFields/TextAreaFormField.tsx

@@ -4,12 +4,11 @@ import { FormLabel } from "./FormLabel";
 import { ErrorFormMessage } from "./ErrorFormMessage";
 import { TextareaField, TextareaFieldProps } from "../TextareaField";
 
-export type TextAreaFormFieldProps = {
+export type TextAreaFormFieldProps = TextareaFieldProps & {
   name: string;
   label?: string;
   required?: boolean;
   placeholder?: string;
-  fieldProps?: TextareaFieldProps;
 };
 
 export const TextAreaFormField = ({
@@ -17,7 +16,7 @@ export const TextAreaFormField = ({
   label,
   required,
   placeholder,
-  fieldProps,
+  ...props
 }: TextAreaFormFieldProps) => {
   const {
     register,
@@ -37,7 +36,7 @@ export const TextAreaFormField = ({
         haveError={haveError}
       />
       <TextareaField
-        {...fieldProps}
+        {...props}
         {...register(name, { required })}
         placeholder={placeholder}
         color={haveError ? "error" : "default"}