@lets-events/react 11.6.5 → 11.7.0

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.5 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 318.78 KB
-ESM ⚡️ Build success in 283ms
-CJS dist/index.js 330.96 KB
-CJS ⚡️ Build success in 298ms
-DTS Build start
-DTS ⚡️ Build success in 5019ms
-DTS dist/index.d.mts 383.40 KB
-DTS dist/index.d.ts  383.40 KB
-⠙
+
+> @lets-events/react@11.7.0 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
+DTS Build start
+ESM dist\index.mjs 319.18 KB
+ESM ⚡️ Build success in 516ms
+CJS dist\index.js 331.25 KB
+CJS ⚡️ Build success in 517ms
+DTS ⚡️ Build success in 4249ms
+DTS dist\index.d.mts 383.30 KB
+DTS dist\index.d.ts  383.30 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 11.7.0
+
+### Minor Changes
+
+- Phone input
+
 ## 11.6.5
 
 ### 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

@@ -14519,28 +14519,26 @@ type TextAreaFormFieldProps = TextareaFieldProps & {
 };
 declare const TextAreaFormField: ({ name, label, required, placeholder, ...props }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type TextFormFieldProps = {
+type TextFormFieldProps = TextFieldProps & {
     name: string;
     label?: string;
     required?: boolean;
-    placeholder?: string;
     mask?: MaskOptions;
-    validation?: {
-        validate?: (value: string) => boolean | string;
-    };
+    validate?: (value: string) => boolean | string;
     validationErrorMessage?: string;
-    disabled?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string;
+    valueFormatter?: {
+        format: (v: string) => string;
+        unformat: (v: string) => string;
+    };
 };
-declare const TextFormField: ({ name, label, required, placeholder, mask, validation, validationErrorMessage, disabled, value, onChange, }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextFormField: ({ name, label, required, mask, validate, validationErrorMessage, onChange, valueFormatter, ...inputProps }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
     onSubmit: SubmitHandler<T>;
     children: JSX.Element;
     methods?: ReturnType<typeof useForm<T>>;
 };
-declare const Form: <T extends FieldValues = FieldValues>({ onSubmit, children, methods, ...props }: FormProps<T>) => react_jsx_runtime.JSX.Element;
+declare const Form: <T extends FieldValues = FieldValues>({ onSubmit, children, ...props }: FormProps<T>) => react_jsx_runtime.JSX.Element;
 
 type MultiSelectFormFieldProps = MultiSelectProps & {
     name: string;
@@ -14553,9 +14551,8 @@ type PhoneFormFieldProps = {
     name: string;
     label?: string;
     required?: boolean;
-    defaultCountry?: string;
 };
-declare const PhoneFormField: ({ name, label, required, defaultCountry, ...props }: PhoneFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const PhoneFormField: ({ name, label, required, }: PhoneFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type CPFFormFieldProps = {
     name: string;

package/dist/index.d.ts

@@ -14519,28 +14519,26 @@ type TextAreaFormFieldProps = TextareaFieldProps & {
 };
 declare const TextAreaFormField: ({ name, label, required, placeholder, ...props }: TextAreaFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-type TextFormFieldProps = {
+type TextFormFieldProps = TextFieldProps & {
     name: string;
     label?: string;
     required?: boolean;
-    placeholder?: string;
     mask?: MaskOptions;
-    validation?: {
-        validate?: (value: string) => boolean | string;
-    };
+    validate?: (value: string) => boolean | string;
     validationErrorMessage?: string;
-    disabled?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    value?: string;
+    valueFormatter?: {
+        format: (v: string) => string;
+        unformat: (v: string) => string;
+    };
 };
-declare const TextFormField: ({ name, label, required, placeholder, mask, validation, validationErrorMessage, disabled, value, onChange, }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextFormField: ({ name, label, required, mask, validate, validationErrorMessage, onChange, valueFormatter, ...inputProps }: TextFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
     onSubmit: SubmitHandler<T>;
     children: JSX.Element;
     methods?: ReturnType<typeof useForm<T>>;
 };
-declare const Form: <T extends FieldValues = FieldValues>({ onSubmit, children, methods, ...props }: FormProps<T>) => react_jsx_runtime.JSX.Element;
+declare const Form: <T extends FieldValues = FieldValues>({ onSubmit, children, ...props }: FormProps<T>) => react_jsx_runtime.JSX.Element;
 
 type MultiSelectFormFieldProps = MultiSelectProps & {
     name: string;
@@ -14553,9 +14551,8 @@ type PhoneFormFieldProps = {
     name: string;
     label?: string;
     required?: boolean;
-    defaultCountry?: string;
 };
-declare const PhoneFormField: ({ name, label, required, defaultCountry, ...props }: PhoneFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const PhoneFormField: ({ name, label, required, }: PhoneFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type CPFFormFieldProps = {
     name: string;