@ikatec/nebula-react 1.0.8 → 1.0.10

package/dist/index.d.mts

@@ -15,7 +15,6 @@ 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  ",
@@ -491,23 +490,12 @@ interface CaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
 declare const Caption: React__default.ForwardRefExoticComponent<CaptionProps & React__default.RefAttributes<HTMLTableCaptionElement>>;
 interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
     size?: 'md' | 'sm';
+    asChild?: boolean;
+    children: ReactNode;
 }
-declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkProps & {
-    [K: string]: any;
-} & {
-    component?: (props: LinkProps) => ReactNode;
-}, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
-type InputPhoneProps = {
-    value: string;
-    onChange: (value: string) => void;
-    className?: string;
-    disabled?: boolean;
-    placeholder?: string;
-    isError?: boolean;
-    defaultCountry?: RPNInput.Country;
-};
-declare function InputPhone({ value, onChange, className, disabled, isError, defaultCountry, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
+declare function InputPhone(): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }

package/dist/index.d.ts

@@ -15,7 +15,6 @@ 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  ",
@@ -491,23 +490,12 @@ interface CaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
 declare const Caption: React__default.ForwardRefExoticComponent<CaptionProps & React__default.RefAttributes<HTMLTableCaptionElement>>;
 interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
     size?: 'md' | 'sm';
+    asChild?: boolean;
+    children: ReactNode;
 }
-declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkProps & {
-    [K: string]: any;
-} & {
-    component?: (props: LinkProps) => ReactNode;
-}, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
 
-type InputPhoneProps = {
-    value: string;
-    onChange: (value: string) => void;
-    className?: string;
-    disabled?: boolean;
-    placeholder?: string;
-    isError?: boolean;
-    defaultCountry?: RPNInput.Country;
-};
-declare function InputPhone({ value, onChange, className, disabled, isError, defaultCountry, ...props }: InputPhoneProps): react_jsx_runtime.JSX.Element;
+declare function InputPhone(): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }

package/dist/index.js

@@ -3552,14 +3552,14 @@ var FlagComponent = ({ country, countryName }) => {
 };
 var PhoneInput = React8__namespace.default.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex items-center justify-center rounded-e-[20px] w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[2px] h-5" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[1px] h-5 z-10" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InputText,
       {
         "data-slot": "phone-input",
         ref,
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full h-auto",
           className
         ),
         ...props
@@ -3577,12 +3577,23 @@ function InputPhone({
   defaultCountry = "BR",
   ...props
 }) {
-  const valueCorrection = value && value.toString().length && !value.toString().startsWith("+") ? `+${value}` : value;
+  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}`;
+    }
+    return `+${countryCode}${stringValue}`;
+  }, [value, countryCode]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RPNInput__namespace.default,
     {
       className: cn(
-        "flex w-full 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-[20px] 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
@@ -3594,11 +3605,11 @@ function InputPhone({
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection?.toString(),
+      value: valueCorrection,
       onChange: (newValue) => onChange(newValue ?? ""),
-      countryCallingCodeEditable: true,
-      initialValueFormat: "national",
       defaultCountry,
+      countryCallingCodeEditable: true,
+      international: true,
       ...props
     }
   );

package/dist/index.mjs

@@ -3512,14 +3512,14 @@ var FlagComponent = ({ country, countryName }) => {
 };
 var PhoneInput = React8__default.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex items-center justify-center rounded-e-[20px] w-full", children: [
-    /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[2px] h-5" }),
+    /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "nebula-ds w-[1px] h-5 z-10" }),
     /* @__PURE__ */ jsx(
       InputText,
       {
         "data-slot": "phone-input",
         ref,
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full h-auto",
           className
         ),
         ...props
@@ -3537,12 +3537,23 @@ function InputPhone({
   defaultCountry = "BR",
   ...props
 }) {
-  const valueCorrection = value && value.toString().length && !value.toString().startsWith("+") ? `+${value}` : value;
+  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}`;
+    }
+    return `+${countryCode}${stringValue}`;
+  }, [value, countryCode]);
   return /* @__PURE__ */ jsx(
     RPNInput.default,
     {
       className: cn(
-        "flex w-full 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-[20px] 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
@@ -3554,11 +3565,11 @@ function InputPhone({
       countrySelectComponent: CountrySelect,
       inputComponent: PhoneInput,
       disabled,
-      value: valueCorrection?.toString(),
+      value: valueCorrection,
       onChange: (newValue) => onChange(newValue ?? ""),
-      countryCallingCodeEditable: true,
-      initialValueFormat: "national",
       defaultCountry,
+      countryCallingCodeEditable: true,
+      international: true,
       ...props
     }
   );

package/package.json

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