@lets-events/react 11.6.1 → 11.6.2

package/.eslintrc.json

@@ -1,3 +1,3 @@
-{
-  "extends": "@lets-events/eslint-config"
+{
+  "extends": "@lets-events/eslint-config"
 }

package/.turbo/turbo-build.log

@@ -1,20 +1,18 @@
-
-
-> @lets-events/react@11.6.1 build
-> tsup src/index.tsx  --format esm,cjs --dts --external react
-
-CLI Building entry: src/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.4.0
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist/index.mjs 316.52 KB
-ESM ⚡️ Build success in 262ms
-CJS dist/index.js 328.68 KB
-CJS ⚡️ Build success in 262ms
-DTS Build start
-DTS ⚡️ Build success in 4645ms
-DTS dist/index.d.mts 391.75 KB
-DTS dist/index.d.ts  391.75 KB
-⠙
+
+> @lets-events/react@11.6.2 build
+> tsup src/index.tsx  --format esm,cjs --dts --external react
+
+CLI Building entry: src/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.4.0
+CLI Target: es6
+ESM Build start
+CJS Build start
+CJS dist\index.js 330.71 KB
+CJS ⚡️ Build success in 251ms
+ESM dist\index.mjs 318.46 KB
+ESM ⚡️ Build success in 252ms
+DTS Build start
+DTS ⚡️ Build success in 4430ms
+DTS dist\index.d.mts 391.83 KB
+DTS dist\index.d.ts  391.83 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 11.6.2
+
+### Patch Changes
+
+- enable phone input
+
 ## 11.6.1
 
 ### Patch Changes

package/dist/index.css

@@ -0,0 +1,171 @@
+/* ../../node_modules/react-international-phone/dist/index.css */
+.react-international-phone-country-selector {
+  position: relative;
+}
+.react-international-phone-country-selector-button {
+  display: flex;
+  height: var(--react-international-phone-height, 36px);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));
+  margin: 0;
+  appearance: button;
+  -webkit-appearance: button;
+  background-color: var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));
+  cursor: pointer;
+  text-transform: none;
+  user-select: none;
+}
+.react-international-phone-country-selector-button:hover {
+  background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
+}
+.react-international-phone-country-selector-button--hide-dropdown {
+  cursor: auto;
+}
+.react-international-phone-country-selector-button--hide-dropdown:hover {
+  background-color: transparent;
+}
+.react-international-phone-country-selector-button__button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-international-phone-country-selector-button__flag-emoji {
+  margin: 0 4px;
+}
+.react-international-phone-country-selector-button__flag-emoji--disabled {
+  opacity: .75;
+}
+.react-international-phone-country-selector-button__dropdown-arrow {
+  border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);
+  border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+  border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+  margin-right: 4px;
+  transition: all .1s ease-out;
+}
+.react-international-phone-country-selector-button__dropdown-arrow--active {
+  transform: rotateX(180deg);
+}
+.react-international-phone-country-selector-button__dropdown-arrow--disabled {
+  border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
+}
+.react-international-phone-country-selector-button--disabled {
+  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
+  cursor: auto;
+}
+.react-international-phone-country-selector-button--disabled:hover {
+  background-color: var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
+}
+.react-international-phone-flag-emoji {
+  width: var(--react-international-phone-flag-width, 24px);
+  height: var(--react-international-phone-flag-height, 24px);
+  box-sizing: border-box;
+}
+.react-international-phone-country-selector-dropdown {
+  position: absolute;
+  z-index: 1;
+  top: var(--react-international-phone-dropdown-top, 44px);
+  left: var(--react-international-phone-dropdown-left, 0);
+  display: flex;
+  width: 300px;
+  max-height: 200px;
+  flex-direction: column;
+  padding: 4px 0;
+  margin: 0;
+  background-color: var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));
+  box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));
+  color: var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
+  list-style: none;
+  overflow-y: scroll;
+}
+.react-international-phone-country-selector-dropdown__preferred-list-divider {
+  height: 1px;
+  border: none;
+  margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
+  background: var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro));
+}
+.react-international-phone-country-selector-dropdown__list-item {
+  display: flex;
+  min-height: var(--react-international-phone-dropdown-item-height, 28px);
+  box-sizing: border-box;
+  align-items: center;
+  padding: 2px 8px;
+}
+.react-international-phone-country-selector-dropdown__list-item-flag-emoji {
+  margin-right: 8px;
+}
+.react-international-phone-country-selector-dropdown__list-item-country-name {
+  overflow: hidden;
+  margin-right: 8px;
+  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.react-international-phone-country-selector-dropdown__list-item-dial-code {
+  color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
+  font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+}
+.react-international-phone-country-selector-dropdown__list-item:hover {
+  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
+  cursor: pointer;
+}
+.react-international-phone-country-selector-dropdown__list-item--selected,
+.react-international-phone-country-selector-dropdown__list-item--focused {
+  background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
+  color: var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222));
+}
+.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,
+.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code {
+  color: var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray));
+}
+.react-international-phone-country-selector-dropdown__list-item--focused {
+  background-color: var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));
+}
+.react-international-phone-dial-code-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border: 1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));
+  margin-right: -1px;
+  background-color: var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));
+  color: var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));
+  font-size: var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px));
+}
+.react-international-phone-dial-code-preview--disabled {
+  background-color: var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));
+  color: var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666));
+}
+.react-international-phone-input-container {
+  display: flex;
+}
+.react-international-phone-input-container .react-international-phone-country-selector-button {
+  border-radius: var(--react-international-phone-border-radius, 4px);
+  margin-right: -1px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.react-international-phone-input-container .react-international-phone-input {
+  overflow: visible;
+  height: var(--react-international-phone-height, 36px);
+  box-sizing: border-box;
+  padding: 0 8px;
+  border: 1px solid var(--react-international-phone-border-color, gainsboro);
+  border-radius: var(--react-international-phone-border-radius, 4px);
+  margin: 0;
+  background-color: var(--react-international-phone-background-color, white);
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  color: var(--react-international-phone-text-color, #222);
+  font-family: inherit;
+  font-size: var(--react-international-phone-font-size, 13px);
+}
+.react-international-phone-input-container .react-international-phone-input:focus {
+  outline: none;
+}
+.react-international-phone-input-container .react-international-phone-input--disabled {
+  background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
+  color: var(--react-international-phone-disabled-text-color, #666);
+}

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, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
+import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14916,7 +14917,7 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type PhoneFormFieldProps = {
+type PhoneFormFieldProps = PhoneInputProps & {
     name: string;
     label?: string;
     required?: boolean;

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, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
+import { PhoneInputProps } from 'react-international-phone';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14916,7 +14917,7 @@ type MultiSelectFormFieldProps = MultiSelectProps & {
 };
 declare const MultiSelectFormField: ({ name, label, required, ...rest }: MultiSelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type PhoneFormFieldProps = {
+type PhoneFormFieldProps = PhoneInputProps & {
     name: string;
     label?: string;
     required?: boolean;

package/dist/index.js

@@ -9860,7 +9860,79 @@ 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,
@@ -9895,6 +9967,17 @@ 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

@@ -9763,7 +9763,79 @@ 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,
@@ -9798,6 +9870,17 @@ 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 })
   ] });
 };
@@ -10156,7 +10239,7 @@ function CountryFormField({
 }
 
 // src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx
-import { useController as useController2, useFormContext as useFormContext7 } from "react-hook-form";
+import { useController as useController3, useFormContext as useFormContext7 } from "react-hook-form";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var PostalCodeFormField = ({
   name,
@@ -10168,7 +10251,7 @@ var PostalCodeFormField = ({
   const { control } = useFormContext7();
   const {
     field: { onChange, value }
-  } = useController2({ name, control });
+  } = useController3({ name, control });
   return /* @__PURE__ */ jsx43(
     TextFormField,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.6.1",
+  "version": "11.6.2",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,6 +41,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"
   }
 }