@lets-events/react 11.6.3 → 11.6.4

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@11.6.3 build
+> @lets-events/react@11.6.4 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 330.83 KB
-CJS ⚡️ Build success in 388ms
-ESM dist/index.mjs 318.50 KB
-ESM ⚡️ Build success in 389ms
+CJS dist/index.js 328.80 KB
+CJS ⚡️ Build success in 293ms
+ESM dist/index.mjs 316.57 KB
+ESM ⚡️ Build success in 294ms
 DTS Build start
-DTS ⚡️ Build success in 6754ms
-DTS dist/index.d.mts 392.72 KB
-DTS dist/index.d.ts  392.72 KB
+DTS ⚡️ Build success in 5873ms
+DTS dist/index.d.mts 392.64 KB
+DTS dist/index.d.ts  392.64 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 11.6.4
+
+### Patch Changes
+
+- phone input removed
+
 ## 11.6.3
 
 ### 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, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
-import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14917,7 +14916,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, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
-import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14917,7 +14916,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

@@ -9864,79 +9864,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,
@@ -9971,17 +9899,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

@@ -9765,79 +9765,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,
@@ -9872,17 +9800,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.6.3",
+  "version": "11.6.4",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,7 +41,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

@@ -2,89 +2,89 @@ import { useController, 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 { PhoneInput, PhoneInputProps } from "react-international-phone";
 import { styled } from "../../styles";
 import { typographyValues } from "../../types/typographyValues";
-import "react-international-phone/style.css";
+// import "react-international-phone/style.css";
 
-export type PhoneFormFieldProps = PhoneInputProps & {
+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",
+// 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,
@@ -115,7 +115,7 @@ export const PhoneFormField = ({
         required={required}
         haveError={haveError}
       />
-      <PhoneFormInput
+      {/* <PhoneFormInput
         {...register(name, { required })}
         defaultCountry={defaultCountry}
         value={watch(name)}
@@ -123,7 +123,7 @@ export const PhoneFormField = ({
         onChange={handlePhoneChange}
         {...props}
         aria-labelledby={`${name}-label`}
-      />
+      /> */}
       <ErrorFormMessage message={errorMsg} />
     </Flex>
   );