@sikka/hawa 0.31.17-next → 0.32.0-next

package/dist/index.d.ts

@@ -851,7 +851,7 @@ type BadgeTypes = {
 declare const Badge: FC<BadgeTypes>;
 declare const BadgedComponent: ({ children, className, hideBadge, position, size, text }: any) => React__default.JSX.Element;
 
-type PhoneInputTypes = {
+type PhoneInputProps = {
     preferredCountry?: {
         label: string;
     };
@@ -861,8 +861,11 @@ type PhoneInputTypes = {
     placeholder?: string;
     handleChange?: (value: string) => void;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    countryCodes?: {
+        label: string;
+    }[];
 };
-declare const PhoneInput: FC<PhoneInputTypes>;
+declare const PhoneInput: FC<PhoneInputProps>;
 
 type PinInputTypes = {
     /** Label text to display for the Pin Input */
@@ -1572,6 +1575,8 @@ type LoginFormTypes = {
     passwordLength?: number;
     /** If true, the form is displayed without a card container styling.*/
     cardless?: boolean;
+    /** Props to pass to the PhoneInput component */
+    phoneInputProps: PhoneInputProps;
 };
 declare const LoginForm: FC<LoginFormTypes>;
 
@@ -2137,4 +2142,4 @@ interface ContentRect {
 }
 declare const useMeasureDirty: (ref: RefObject<HTMLElement>) => ContentRect;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, AuthButtons, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, type BreadcrumbItemProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, ContactForm, type ContentRect, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem$1 as NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PhoneMockup, PinInput, Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, type TextFieldTypes, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, type ToasterToastProps, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, navigationMenuTriggerStyle, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, type AppSidebarItemProps, AppStores, AppTabs, AppTopbar, AuthButtons, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, type BreadcrumbItemProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, type ChipColors, type ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, type CommandInputProps, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, ContactForm, type ContentRect, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadio, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, FileUploader, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, type LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, type MenuItemType, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem$1 as NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, NewPasswordForm, NoPermission, NotFound, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, type PhoneInputProps, PhoneMockup, PinInput, Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, type RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, type SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, Stats, StopPropagationWrapper, type SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, type TextFieldTypes, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, type ToasterToastProps, Tooltip, Usage, type UseFocusWithinOptions, type UseMediaQueryOptions, UserReferralSource, buttonVariants, navigationMenuTriggerStyle, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -7086,12 +7086,14 @@ var countries_default = countries;
 var PhoneInput = ({
   labelProps,
   inputProps,
+  countryCodes,
   ...props
 }) => {
   const [phoneNumber, setPhoneNumber] = (0, import_react34.useState)("");
   const [countryCode, setCountryCode] = (0, import_react34.useState)(props.preferredCountry);
   const inputRef = (0, import_react34.useRef)(null);
   const handleInputChange = (e) => {
+    console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
     if (input === "" || validChars.test(input)) {
@@ -7114,7 +7116,7 @@ var PhoneInput = ({
       isSearchable: true,
       isClearable: false,
       placeholder: "Code",
-      options: countries_default,
+      options: countryCodes || countries_default,
       onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry
@@ -10223,8 +10225,8 @@ var LoginForm = ({
         required_error: ((_m = texts == null ? void 0 : texts.phone) == null ? void 0 : _m.required) || "Phone Number Required"
       }).refine(
         (value) => {
-          let phoneNumber = (0, import_libphonenumber_js.parsePhoneNumber)(value);
-          return phoneNumber.isValid();
+          let isPhoneValid = (0, import_libphonenumber_js.isPossiblePhoneNumber)(value) && (0, import_libphonenumber_js.isValidPhoneNumber)(value) && (0, import_libphonenumber_js.validatePhoneNumberLength)(value) === void 0;
+          return isPhoneValid;
         },
         { message: ((_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid) || "Phone Number Invalid" }
       )
@@ -10378,7 +10380,15 @@ var LoginForm = ({
                   label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
                   helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
                   preferredCountry: { label: "+966" },
-                  handleChange: (e) => field.onChange((0, import_libphonenumber_js.parsePhoneNumber)(e).number)
+                  ...props.phoneInputProps,
+                  handleChange: (e) => {
+                    if ((0, import_libphonenumber_js.isValidPhoneNumber)(e) && (0, import_libphonenumber_js.isPossiblePhoneNumber)(e) && (0, import_libphonenumber_js.validatePhoneNumberLength)(e) === void 0) {
+                      let parsed = (0, import_libphonenumber_js.parsePhoneNumber)(e);
+                      field.onChange(parsed.number);
+                    } else {
+                      field.onChange(e);
+                    }
+                  }
                 }
               );
             }

package/dist/index.mjs

@@ -6856,12 +6856,14 @@ var countries_default = countries;
 var PhoneInput = ({
   labelProps,
   inputProps,
+  countryCodes,
   ...props
 }) => {
   const [phoneNumber, setPhoneNumber] = useState26("");
   const [countryCode, setCountryCode] = useState26(props.preferredCountry);
   const inputRef = useRef16(null);
   const handleInputChange = (e) => {
+    console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
     if (input === "" || validChars.test(input)) {
@@ -6884,7 +6886,7 @@ var PhoneInput = ({
       isSearchable: true,
       isClearable: false,
       placeholder: "Code",
-      options: countries_default,
+      options: countryCodes || countries_default,
       onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry
@@ -9948,7 +9950,12 @@ import React83 from "react";
 import { useState as useState39 } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { parsePhoneNumber } from "libphonenumber-js";
+import {
+  isPossiblePhoneNumber,
+  isValidPhoneNumber,
+  parsePhoneNumber,
+  validatePhoneNumberLength
+} from "libphonenumber-js";
 import * as z from "zod";
 var LoginForm = ({
   loginType = "email",
@@ -10000,8 +10007,8 @@ var LoginForm = ({
         required_error: ((_m = texts == null ? void 0 : texts.phone) == null ? void 0 : _m.required) || "Phone Number Required"
       }).refine(
         (value) => {
-          let phoneNumber = parsePhoneNumber(value);
-          return phoneNumber.isValid();
+          let isPhoneValid = isPossiblePhoneNumber(value) && isValidPhoneNumber(value) && validatePhoneNumberLength(value) === void 0;
+          return isPhoneValid;
         },
         { message: ((_n = texts == null ? void 0 : texts.phone) == null ? void 0 : _n.invalid) || "Phone Number Invalid" }
       )
@@ -10155,7 +10162,15 @@ var LoginForm = ({
                   label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
                   helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
                   preferredCountry: { label: "+966" },
-                  handleChange: (e) => field.onChange(parsePhoneNumber(e).number)
+                  ...props.phoneInputProps,
+                  handleChange: (e) => {
+                    if (isValidPhoneNumber(e) && isPossiblePhoneNumber(e) && validatePhoneNumberLength(e) === void 0) {
+                      let parsed = parsePhoneNumber(e);
+                      field.onChange(parsed.number);
+                    } else {
+                      field.onChange(e);
+                    }
+                  }
                 }
               );
             }

package/dist/phoneInput/index.d.mts

@@ -10,7 +10,7 @@ type LabelProps = {
     required?: boolean;
 };
 
-type PhoneInputTypes = {
+type PhoneInputProps = {
     preferredCountry?: {
         label: string;
     };
@@ -20,7 +20,10 @@ type PhoneInputTypes = {
     placeholder?: string;
     handleChange?: (value: string) => void;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    countryCodes?: {
+        label: string;
+    }[];
 };
-declare const PhoneInput: FC<PhoneInputTypes>;
+declare const PhoneInput: FC<PhoneInputProps>;
 
-export { PhoneInput };
+export { PhoneInput, type PhoneInputProps };

package/dist/phoneInput/index.d.ts

@@ -10,7 +10,7 @@ type LabelProps = {
     required?: boolean;
 };
 
-type PhoneInputTypes = {
+type PhoneInputProps = {
     preferredCountry?: {
         label: string;
     };
@@ -20,7 +20,10 @@ type PhoneInputTypes = {
     placeholder?: string;
     handleChange?: (value: string) => void;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    countryCodes?: {
+        label: string;
+    }[];
 };
-declare const PhoneInput: FC<PhoneInputTypes>;
+declare const PhoneInput: FC<PhoneInputProps>;
 
-export { PhoneInput };
+export { PhoneInput, type PhoneInputProps };

package/dist/phoneInput/index.js

@@ -2083,12 +2083,14 @@ var Select = ({
 var PhoneInput = ({
   labelProps,
   inputProps,
+  countryCodes,
   ...props
 }) => {
   const [phoneNumber, setPhoneNumber] = (0, import_react4.useState)("");
   const [countryCode, setCountryCode] = (0, import_react4.useState)(props.preferredCountry);
   const inputRef = (0, import_react4.useRef)(null);
   const handleInputChange = (e) => {
+    console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
     if (input === "" || validChars.test(input)) {
@@ -2111,7 +2113,7 @@ var PhoneInput = ({
       isSearchable: true,
       isClearable: false,
       placeholder: "Code",
-      options: countries_default,
+      options: countryCodes || countries_default,
       onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
       defaultValue: props.preferredCountry