@ikatec/nebula-react 1.0.10 → 1.0.12

package/dist/index.d.mts

@@ -15,6 +15,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as RPNInput from 'react-phone-number-input';
 
 declare enum buttonVariantEnum {
     primary = "\n    bg-button-primary-background-default\n    hover:bg-button-primary-background-hover\n    active:bg-button-primary-background-active\n    focus:bg-button-primary-background-focus\n    focus:ring-button-primary-border-focus\n    text-button-primary-text\n  ",
@@ -495,7 +496,13 @@ interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
 }
 declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
-declare function InputPhone(): react_jsx_runtime.JSX.Element;
+type InputPhoneProps = {
+    isError?: boolean;
+    defaultCountry?: RPNInput.Country;
+    onChange: (value: string) => void;
+    value?: string | null;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+declare function InputPhone({ className, disabled, isError, defaultCountry, value, onChange, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as RPNInput from 'react-phone-number-input';
 
 declare enum buttonVariantEnum {
     primary = "\n    bg-button-primary-background-default\n    hover:bg-button-primary-background-hover\n    active:bg-button-primary-background-active\n    focus:bg-button-primary-background-focus\n    focus:ring-button-primary-border-focus\n    text-button-primary-text\n  ",
@@ -495,7 +496,13 @@ interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
 }
 declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
-declare function InputPhone(): react_jsx_runtime.JSX.Element;
+type InputPhoneProps = {
+    isError?: boolean;
+    defaultCountry?: RPNInput.Country;
+    onChange: (value: string) => void;
+    value?: string | null;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+declare function InputPhone({ className, disabled, isError, defaultCountry, value, onChange, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }

package/dist/index.js

@@ -179,7 +179,7 @@ var buttonVariantsConfig = classVarianceAuthority.cva(
     items-center
     justify-center
     whitespace-nowrap
-    rounded-full
+    rounded-button
     font-semibold
     ring-offset-background
     transition-colors
@@ -2266,7 +2266,7 @@ var Option = (props) => {
 };
 var controlStyles = ({ isDisabled, isFocused }, isError) => {
   return cn(
-    "flex w-full items-center border bg-inputSelect-default-background rounded-[20px] px-4 min-h-10 transition",
+    "flex w-full items-center border bg-inputSelect-default-background rounded-input px-4 min-h-10 transition",
     {
       "ring-[3px] border-inputSelect-focus-border text-inputSelect-focus-text ring-inputSelect-focus-border": isFocused,
       "border-inputSelect-danger-border text-inputSelect-danger-icon": isError,
@@ -2382,7 +2382,7 @@ var InputText = React8__namespace.forwardRef(
         {
           ref,
           className: cn(
-            "w-full h-10 outline-none rounded-[20px] text-sm leading-none font-medium",
+            "w-full h-10 outline-none rounded-input text-sm leading-none font-medium",
             "bg-inputText-background-default disabled:bg-inputText-background-disabled",
             "border border-inputText-border-default focus:ring-[3px] focus:ring-inputText-border-focus focus:border-inputText-border-focus",
             "text-inputText-text-filled focus:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
@@ -3569,31 +3569,58 @@ var PhoneInput = React8__namespace.default.forwardRef(({ className, ...props },
 });
 PhoneInput.displayName = "Input";
 function InputPhone({
-  value,
-  onChange,
   className,
   disabled,
   isError = false,
   defaultCountry = "BR",
+  value,
+  onChange,
   ...props
 }) {
+  const [valueState, setValueState] = React8.useState("");
+  const [isFirstRender, setIsFirstRender] = React8.useState(true);
   const countryCode = defaultCountry ? RPNInput__namespace.getCountryCallingCode(defaultCountry) : null;
-  const valueCorrection = React8__namespace.default.useMemo(() => {
-    if (!value || !countryCode) return "";
-    const stringValue = value.toString().trim();
-    if (stringValue.startsWith("+")) {
-      return stringValue;
-    }
-    if (stringValue.startsWith(countryCode)) {
-      return `+${stringValue}`;
+  const normalizePhoneNumber = React8.useCallback(
+    (inputValue) => {
+      if (!inputValue) return "";
+      const cleanValue = inputValue.toString().replace(/[^\d+]/g, "");
+      if (!cleanValue) return "";
+      if (cleanValue.startsWith("+")) {
+        return cleanValue;
+      }
+      if (countryCode && cleanValue.startsWith(countryCode)) {
+        return `+${cleanValue}`;
+      }
+      if (countryCode && /^\d{10,11}$/.test(cleanValue)) {
+        return `+${countryCode}${cleanValue}`;
+      }
+      return cleanValue;
+    },
+    [countryCode]
+  );
+  React8.useEffect(() => {
+    if (value !== void 0 && value !== null) {
+      const normalizedValue = normalizePhoneNumber(value);
+      setValueState(normalizedValue);
+    } else {
+      setValueState("");
     }
-    return `+${countryCode}${stringValue}`;
-  }, [value, countryCode]);
+  }, [value, normalizePhoneNumber]);
+  const handleChange = React8.useCallback(
+    (newValue) => {
+      setIsFirstRender(false);
+      setValueState(newValue);
+      if (onChange) {
+        onChange(newValue || "");
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     RPNInput__namespace.default,
     {
       className: cn(
-        "flex w-full h-10 bg-inputText-background-default rounded-[20px] border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
+        "flex w-full h-10 bg-inputText-background-default rounded-input border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
         { "bg-inputText-background-disabled": disabled },
         {
           "text-inputText-icon-danger border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus": isError
@@ -3601,16 +3628,16 @@ function InputPhone({
         className
       ),
       flagComponent: FlagComponent,
-      limitMaxLength: true,
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection,
-      onChange: (newValue) => onChange(newValue ?? ""),
-      defaultCountry,
-      countryCallingCodeEditable: true,
       international: true,
-      ...props
+      limitMaxLength: true,
+      defaultCountry: isFirstRender && (!value || value === "") ? defaultCountry : valueState ? defaultCountry : void 0,
+      countryCallingCodeEditable: true,
+      ...props,
+      value: valueState,
+      onChange: handleChange
     }
   );
 }

package/dist/index.mjs

@@ -139,7 +139,7 @@ var buttonVariantsConfig = cva(
     items-center
     justify-center
     whitespace-nowrap
-    rounded-full
+    rounded-button
     font-semibold
     ring-offset-background
     transition-colors
@@ -2226,7 +2226,7 @@ var Option = (props) => {
 };
 var controlStyles = ({ isDisabled, isFocused }, isError) => {
   return cn(
-    "flex w-full items-center border bg-inputSelect-default-background rounded-[20px] px-4 min-h-10 transition",
+    "flex w-full items-center border bg-inputSelect-default-background rounded-input px-4 min-h-10 transition",
     {
       "ring-[3px] border-inputSelect-focus-border text-inputSelect-focus-text ring-inputSelect-focus-border": isFocused,
       "border-inputSelect-danger-border text-inputSelect-danger-icon": isError,
@@ -2342,7 +2342,7 @@ var InputText = React8.forwardRef(
         {
           ref,
           className: cn(
-            "w-full h-10 outline-none rounded-[20px] text-sm leading-none font-medium",
+            "w-full h-10 outline-none rounded-input text-sm leading-none font-medium",
             "bg-inputText-background-default disabled:bg-inputText-background-disabled",
             "border border-inputText-border-default focus:ring-[3px] focus:ring-inputText-border-focus focus:border-inputText-border-focus",
             "text-inputText-text-filled focus:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
@@ -3529,31 +3529,58 @@ var PhoneInput = React8__default.forwardRef(({ className, ...props }, ref) => {
 });
 PhoneInput.displayName = "Input";
 function InputPhone({
-  value,
-  onChange,
   className,
   disabled,
   isError = false,
   defaultCountry = "BR",
+  value,
+  onChange,
   ...props
 }) {
+  const [valueState, setValueState] = useState("");
+  const [isFirstRender, setIsFirstRender] = useState(true);
   const countryCode = defaultCountry ? RPNInput.getCountryCallingCode(defaultCountry) : null;
-  const valueCorrection = React8__default.useMemo(() => {
-    if (!value || !countryCode) return "";
-    const stringValue = value.toString().trim();
-    if (stringValue.startsWith("+")) {
-      return stringValue;
-    }
-    if (stringValue.startsWith(countryCode)) {
-      return `+${stringValue}`;
+  const normalizePhoneNumber = useCallback(
+    (inputValue) => {
+      if (!inputValue) return "";
+      const cleanValue = inputValue.toString().replace(/[^\d+]/g, "");
+      if (!cleanValue) return "";
+      if (cleanValue.startsWith("+")) {
+        return cleanValue;
+      }
+      if (countryCode && cleanValue.startsWith(countryCode)) {
+        return `+${cleanValue}`;
+      }
+      if (countryCode && /^\d{10,11}$/.test(cleanValue)) {
+        return `+${countryCode}${cleanValue}`;
+      }
+      return cleanValue;
+    },
+    [countryCode]
+  );
+  useEffect(() => {
+    if (value !== void 0 && value !== null) {
+      const normalizedValue = normalizePhoneNumber(value);
+      setValueState(normalizedValue);
+    } else {
+      setValueState("");
     }
-    return `+${countryCode}${stringValue}`;
-  }, [value, countryCode]);
+  }, [value, normalizePhoneNumber]);
+  const handleChange = useCallback(
+    (newValue) => {
+      setIsFirstRender(false);
+      setValueState(newValue);
+      if (onChange) {
+        onChange(newValue || "");
+      }
+    },
+    [onChange]
+  );
   return /* @__PURE__ */ jsx(
     RPNInput.default,
     {
       className: cn(
-        "flex w-full h-10 bg-inputText-background-default rounded-[20px] border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
+        "flex w-full h-10 bg-inputText-background-default rounded-input border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
         { "bg-inputText-background-disabled": disabled },
         {
           "text-inputText-icon-danger border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus": isError
@@ -3561,16 +3588,16 @@ function InputPhone({
         className
       ),
       flagComponent: FlagComponent,
-      limitMaxLength: true,
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection,
-      onChange: (newValue) => onChange(newValue ?? ""),
-      defaultCountry,
-      countryCallingCodeEditable: true,
       international: true,
-      ...props
+      limitMaxLength: true,
+      defaultCountry: isFirstRender && (!value || value === "") ? defaultCountry : valueState ? defaultCountry : void 0,
+      countryCallingCodeEditable: true,
+      ...props,
+      value: valueState,
+      onChange: handleChange
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "React components",
   "publishConfig": {
     "access": "public"