@sikka/hawa 0.7.19-next → 0.8.0-next

package/dist/index.css

@@ -1070,6 +1070,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[36px\] {
   height: 36px;
 }
+.hawa-h-\[37\.5px\] {
+  height: 37.5px;
+}
 .hawa-h-\[38px\] {
   height: 38px;
 }
@@ -1230,6 +1233,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-w-screen {
   width: 100vw;
 }
+.hawa-min-w-\[65px\] {
+  min-width: 65px;
+}
 .hawa-min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1509,11 +1515,6 @@ input[type="number"]::-webkit-inner-spin-button,
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
-.hawa-space-x-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .hawa-space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -2053,6 +2054,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pl-8 {
   padding-left: 2rem;
 }
+.hawa-pr-0 {
+  padding-right: 0px;
+}
 .hawa-pr-10 {
   padding-right: 2.5rem;
 }

package/dist/index.d.mts

@@ -613,12 +613,13 @@ declare const CommandShortcut: {
 
 declare function Combobox(): React$1.JSX.Element;
 
+type SelectOptionProps = {
+    value: any;
+    label: any;
+};
 type SelectTypes = {
     label?: string;
-    options?: {
-        value: any;
-        label: any;
-    }[];
+    options?: SelectOptionProps[];
     isCreatable?: boolean;
     isClearable?: boolean;
     isMulti?: boolean;
@@ -637,6 +638,8 @@ type SelectTypes = {
     defaultValue?: any;
     handleCreateOption?: () => void;
     placeholder?: string;
+    hideIndicator?: boolean;
+    phoneCode?: boolean;
     isLoading?: any;
     texts?: {
         noOptions?: string;
@@ -688,6 +691,7 @@ type NavigationMenuTypes = {
     }[];
     rootClassNames?: string;
     viewportClassNames?: string;
+    direction?: "rtl" | "ltr";
 };
 declare const NavigationMenu: React$1.FC<NavigationMenuTypes>;
 
@@ -939,7 +943,6 @@ type RegisterFormTypes = {
         confirmPasswordLabel: string;
         confirmPasswordPlaceholder: string;
         confirmPasswordRequired: string;
-        refCodePlaceholder: string;
         subscribeToNewsletter: string;
         forgotPasswordText: string;
         termsText: string;
@@ -953,7 +956,9 @@ type RegisterFormTypes = {
         registerViaGithubLabel: string;
         registerViaTwitterLabel: string;
         refCode: string;
+        refCodePlaceholder: string;
         userReferenceLabel: string;
+        userReferencePlaceholder: string;
     };
     /** Enables registration via Google when set to true. */
     viaGoogle: boolean;
@@ -991,6 +996,7 @@ type RegisterFormTypes = {
     registerFields: any[];
     /** Indicates whether the form submission is in progress. */
     isLoading?: boolean;
+    userReferenceOptions: SelectOptionProps[];
 };
 declare const RegisterForm: FC<RegisterFormTypes>;
 
@@ -1422,4 +1428,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HorizontalPricing, Input, InterfaceSettings, Label, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, Separator, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useFormField, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HorizontalPricing, Input, InterfaceSettings, Label, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, SelectOptionProps, Separator, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useFormField, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -613,12 +613,13 @@ declare const CommandShortcut: {
 
 declare function Combobox(): React$1.JSX.Element;
 
+type SelectOptionProps = {
+    value: any;
+    label: any;
+};
 type SelectTypes = {
     label?: string;
-    options?: {
-        value: any;
-        label: any;
-    }[];
+    options?: SelectOptionProps[];
     isCreatable?: boolean;
     isClearable?: boolean;
     isMulti?: boolean;
@@ -637,6 +638,8 @@ type SelectTypes = {
     defaultValue?: any;
     handleCreateOption?: () => void;
     placeholder?: string;
+    hideIndicator?: boolean;
+    phoneCode?: boolean;
     isLoading?: any;
     texts?: {
         noOptions?: string;
@@ -688,6 +691,7 @@ type NavigationMenuTypes = {
     }[];
     rootClassNames?: string;
     viewportClassNames?: string;
+    direction?: "rtl" | "ltr";
 };
 declare const NavigationMenu: React$1.FC<NavigationMenuTypes>;
 
@@ -939,7 +943,6 @@ type RegisterFormTypes = {
         confirmPasswordLabel: string;
         confirmPasswordPlaceholder: string;
         confirmPasswordRequired: string;
-        refCodePlaceholder: string;
         subscribeToNewsletter: string;
         forgotPasswordText: string;
         termsText: string;
@@ -953,7 +956,9 @@ type RegisterFormTypes = {
         registerViaGithubLabel: string;
         registerViaTwitterLabel: string;
         refCode: string;
+        refCodePlaceholder: string;
         userReferenceLabel: string;
+        userReferencePlaceholder: string;
     };
     /** Enables registration via Google when set to true. */
     viaGoogle: boolean;
@@ -991,6 +996,7 @@ type RegisterFormTypes = {
     registerFields: any[];
     /** Indicates whether the form submission is in progress. */
     isLoading?: boolean;
+    userReferenceOptions: SelectOptionProps[];
 };
 declare const RegisterForm: FC<RegisterFormTypes>;
 
@@ -1422,4 +1428,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HorizontalPricing, Input, InterfaceSettings, Label, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, Separator, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useFormField, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppStores, BackToTop, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckEmail, Checkbox, Chip, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HorizontalPricing, Input, InterfaceSettings, Label, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, Select, SelectOptionProps, Separator, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, Stats, SubItem$2 as SubItem, Switch, TChipTypes, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useFormField, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -831,7 +831,7 @@ var AdCard = function(_param) {
     return /* @__PURE__ */ import_react2.default.createElement("div", {
         ref: adRef
     }, /* @__PURE__ */ import_react2.default.createElement("div", _object_spread_props(_object_spread({
-        className: (0, import_clsx.default)(cardStyles[orientation], "dark:hawa-text-white")
+        className: (0, import_clsx.default)(cardStyles[orientation], "")
     }, props), {
         onClick: props.handleClick
     }), /* @__PURE__ */ import_react2.default.createElement("div", {
@@ -4387,34 +4387,6 @@ var import_clsx9 = __toESM(require("clsx"));
 var import_react18 = __toESM(require("react"));
 var import_react_select = __toESM(require("react-select"));
 var import_creatable = __toESM(require("react-select/creatable"));
-var Menu = function(_param) {
-    var cx = _param.cx, children = _param.children, getStyles = _param.getStyles, innerProps = _param.innerProps, innerRef = _param.innerRef, props = _object_without_properties(_param, [
-        "cx",
-        "children",
-        "getStyles",
-        "innerProps",
-        "innerRef"
-    ]);
-    var menuOpen = props.selectProps.menuIsOpen;
-    return /* @__PURE__ */ import_react18.default.createElement("div", _object_spread({
-        className: cn("hawa-absolute hawa-shadow-md dark:dark-shadow hawa-z-10 hawa-mt-2 hawa-flex hawa-w-full  hawa-flex-col hawa-justify-start  hawa-rounded  hawa-border  hawa-bg-background  hawa-p-1.5", menuOpen && "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "),
-        ref: innerRef
-    }, innerProps), children);
-};
-var Option = function(_param) {
-    var cx = _param.cx, children = _param.children, getStyles = _param.getStyles, innerProps = _param.innerProps, innerRef = _param.innerRef, _param_size = _param.size, size = _param_size === void 0 ? "normal" : _param_size, props = _object_without_properties(_param, [
-        "cx",
-        "children",
-        "getStyles",
-        "innerProps",
-        "innerRef",
-        "size"
-    ]);
-    return /* @__PURE__ */ import_react18.default.createElement("div", _object_spread({
-        ref: innerRef,
-        className: "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hover:hawa-bg-primary hawa-transition-all hover:hawa-text-primary-foreground "
-    }, innerProps), children);
-};
 var Select = function(props) {
     var Control = function(param) {
         var // cx,
@@ -4431,43 +4403,54 @@ var Select = function(props) {
         var _props_texts_noOptions;
         return /* @__PURE__ */ import_react18.default.createElement("div", null, (_props_texts_noOptions = (_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.noOptions) !== null && _props_texts_noOptions !== void 0 ? _props_texts_noOptions : "No Items Found");
     };
+    var Option = function(param) {
+        var children = param.children, innerProps = param.innerProps, innerRef = param.innerRef;
+        return /* @__PURE__ */ import_react18.default.createElement("div", _object_spread({
+            ref: innerRef,
+            className: cn("hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hover:hawa-bg-primary hawa-transition-all hover:hawa-text-primary-foreground")
+        }, innerProps), children);
+    };
+    var Menu = function(_param) {
+        var cx = _param.cx, children = _param.children, getStyles = _param.getStyles, innerProps = _param.innerProps, innerRef = _param.innerRef, menuProps = _object_without_properties(_param, [
+            "cx",
+            "children",
+            "getStyles",
+            "innerProps",
+            "innerRef"
+        ]);
+        var menuOpen = menuProps.selectProps.menuIsOpen;
+        return /* @__PURE__ */ import_react18.default.createElement("div", _object_spread({
+            className: cn("hawa-absolute  hawa-shadow-md dark:dark-shadow hawa-z-10 hawa-mt-1 hawa-flex hawa-flex-col hawa-justify-start  hawa-rounded  hawa-border hawa-bg-background", props.phoneCode ? "hawa-p-1.5 hawa-pr-0" : "hawa-p-1.5 hawa-w-full", menuOpen && "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "),
+            ref: innerRef
+        }, innerProps), children);
+    };
     return /* @__PURE__ */ import_react18.default.createElement("div", {
         className: cn("hawa-flex hawa-flex-col hawa-gap-2", props.width === "fit" ? "hawa-w-fit" : "hawa-w-full")
     }, props.label && /* @__PURE__ */ import_react18.default.createElement(Label, null, props.label), props.isLoading ? /* @__PURE__ */ import_react18.default.createElement(Skeleton, {
         className: "hawa-h-[38px] hawa-w-full"
-    }) : !props.isCreatable ? /* @__PURE__ */ import_react18.default.createElement(import_react_select.default, {
+    }) : !props.isCreatable ? //   TODO: enable keyboard to go to the next item in the list
+    /* @__PURE__ */ import_react18.default.createElement(import_react_select.default, {
         noOptionsMessage: NoOption,
         classNames: {
-            // menuList: (d) => {
-            //   console.log("d is ", d.selectProps.menuIsOpen);
-            //   return cn(
-            //     "hawa-absolute hawa-shadow-md dark:dark-shadow hawa-z-10 hawa-mt-2 hawa-flex hawa-w-full  hawa-flex-col hawa-justify-start  hawa-rounded  hawa-border  hawa-bg-background  hawa-p-1.5",
-            //     d.selectProps.menuIsOpen
-            //       ? "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "
-            //       : "hawa-zoom-out-95 hawa-fade-out-0 hawa-animate-out"
-            //   );
-            // },
             control: function() {
-                return cn(" hawa-text-sm hawa-flex hawa-p-2 hawa-w-full  hawa-rounded hawa-border hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500", props.controlClassNames);
+                return cn(// "hawa-text-sm hawa-flex hawa-w-full hawa-rounded hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500 hawa-cursor-pointer hawa-border",
+                // "hawa-p-2",
+                props.phoneCode && "hawa-rounded-r-none", props.controlClassNames);
             },
             container: function() {
-                return cn("hawa-rounded", props.containerClassNames, props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer");
+                return cn("hawa-rounded", props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[37.5px] ", "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm", props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer");
             },
-            //   TODO: enable keyboard to go to the next item in the list
             placeholder: function() {
-                return "hawa-px-2 hawa-text-muted-foreground";
-            },
-            input: function() {
-                return "hawa-text-primary hawa-px-2";
+                return "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
             },
             valueContainer: function() {
-                return "hawa-text-white dark:hawa-text-muted-foreground";
+                return "hawa-text-foreground hawa-px-1 ";
             },
             singleValue: function() {
-                return "hawa-text-black dark:hawa-text-white hawa-px-2";
+                return "hawa-text-foreground";
             },
             indicatorsContainer: function() {
-                return " hawa-px-0 hawa-cursor-pointer hawa-text-muted-foreground";
+                return cn(" hawa-px-0 hawa-cursor-pointer hawa-text-muted-foreground", props.hideIndicator && "hawa-invisible");
             }
         },
         unstyled: true,
@@ -4480,13 +4463,14 @@ var Select = function(props) {
         placeholder: props.placeholder,
         autoFocus: true,
         onChange: function(newValue, action) {
-            return(// props.onChange(newValue.label, action)
-            props.onChange(newValue, action));
+            return props.onChange(newValue, action);
         },
         components: {
-            // Control,
             Option: Option,
-            Menu: Menu
+            Menu: Menu,
+            IndicatorsContainer: function() {
+                return null;
+            }
         },
         getOptionLabel: props.getOptionLabel
     }) : /* @__PURE__ */ import_react18.default.createElement(import_creatable.default, {
@@ -4497,7 +4481,7 @@ var Select = function(props) {
         },
         classNames: {
             container: function() {
-                return cn("hawa-rounded ", props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer");
+                return cn("hawa-rounded", props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer");
             },
             placeholder: function() {
                 return "hawa-px-2 hawa-text-muted-foreground";
@@ -4525,13 +4509,13 @@ var Select = function(props) {
         onChange: function(newValue, action) {
             return props.onChange(newValue, action);
         },
-        onInputChange: function(newValue, action) {
-            return props.onInputChange(newValue, action);
-        },
         components: {
             Control: Control,
             Option: Option,
             Menu: Menu
+        },
+        onInputChange: function(newValue, action) {
+            return props.onInputChange(newValue, action);
         }
     }), props.helperText && /* @__PURE__ */ import_react18.default.createElement("p", {
         className: "hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500"
@@ -4548,9 +4532,10 @@ var PhoneInput = function(props) {
         dir: "ltr",
         className: "hawa-flex hawa-flex-row hawa-w-full "
     }, /* @__PURE__ */ import_react19.default.createElement(Select, {
+        phoneCode: true,
+        hideIndicator: true,
         width: "fit",
-        controlClassNames: "hawa-rounded-r-none",
-        containerClassNames: "hawa-w-[100px] hawa-p-0 hawa-rounded-r-none",
+        placeholder: "Code",
         options: countries_default,
         isMulti: false,
         isSearchable: true,
@@ -6065,12 +6050,12 @@ var NavigationMenuList = React47.forwardRef(function(_param, ref) /* @__PURE__ *
     ]);
     return React47.createElement(NavigationMenuPrimitive.List, _object_spread({
         ref: ref,
-        className: cn("hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-space-x-1", className)
+        className: cn("hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1", className)
     }, props));
 });
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
-var navigationMenuTriggerStyle = (0, import_class_variance_authority4.cva)("hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 data-[state=open]:hawa-bg-accent/50");
+var navigationMenuTriggerStyle = (0, import_class_variance_authority4.cva)("hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 data-[state=open]:hawa-bg-accent/50");
 var NavigationMenuTrigger = React47.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, children = _param.children, props = _object_without_properties(_param, [
         "className",
@@ -6090,7 +6075,7 @@ var NavigationMenuTrigger = React47.forwardRef(function(_param, ref) /* @__PURE_
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
         "aria-hidden": "true",
-        className: "hawa-relative hawa-top-[1px] hawa-ml-1 hawa-h-4 hawa-w-4 hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180"
+        className: "hawa-relative hawa-top-[1px] hawa-h-4 hawa-w-4 hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180"
     }, /* @__PURE__ */ React47.createElement("path", {
         d: "m6 9 6 6 6-6"
     })));
@@ -6147,6 +6132,7 @@ var NavigationMenuIndicator = React47.forwardRef(function(_param, ref) /* @__PUR
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 var NavigationMenu = function(props) {
     return /* @__PURE__ */ React47.createElement(NavigationMenuRoot, {
+        dir: props.direction,
         delayDuration: 0,
         className: props.rootClassNames,
         viewportClassNames: props.viewportClassNames
@@ -7003,26 +6989,15 @@ var RegisterForm = function(props) {
         name: "reference",
         render: function(param) {
             var field = param.field;
+            var _props_texts, _props_texts1;
             return /* @__PURE__ */ import_react34.default.createElement(Select, {
-                label: props.texts.userReferenceLabel || "How did you learn about us?",
+                label: ((_props_texts = props.texts) === null || _props_texts === void 0 ? void 0 : _props_texts.userReferenceLabel) || "How did you learn about us?",
+                placeholder: (_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.userReferencePlaceholder,
                 isCreatable: false,
                 isMulti: false,
                 isSearchable: false,
                 isClearable: false,
-                options: [
-                    {
-                        value: "friend",
-                        label: "From a friend"
-                    },
-                    {
-                        value: "ad",
-                        label: "Advertisement"
-                    },
-                    {
-                        value: "other",
-                        label: "Other"
-                    }
-                ],
+                options: props.userReferenceOptions,
                 onChange: function(e) {
                     field.onChange(e.value);
                 }

package/dist/index.mjs

@@ -72,7 +72,7 @@ var AdCard = ({ orientation, ...props }) => {
   return /* @__PURE__ */ React2.createElement("div", { ref: adRef }, /* @__PURE__ */ React2.createElement(
     "div",
     {
-      className: clsx(cardStyles[orientation], "dark:hawa-text-white"),
+      className: clsx(cardStyles[orientation], ""),
       ...props,
       onClick: props.handleClick
     },
@@ -3984,52 +3984,6 @@ import clsx9 from "clsx";
 import React29 from "react";
 import ReactSelect from "react-select";
 import CreatableSelect from "react-select/creatable";
-var Menu = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  ...props
-}) => {
-  const menuOpen = props.selectProps.menuIsOpen;
-  return /* @__PURE__ */ React29.createElement(
-    "div",
-    {
-      className: cn(
-        "hawa-absolute hawa-shadow-md dark:dark-shadow hawa-z-10 hawa-mt-2 hawa-flex hawa-w-full  hawa-flex-col hawa-justify-start  hawa-rounded  hawa-border  hawa-bg-background  hawa-p-1.5",
-        menuOpen && "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "
-        // menuOpen
-        //   ? "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "
-        //   : "hawa-zoom-out-95 hawa-fade-out-0 hawa-animate-out"
-        // "hawa-zoom-in-95 hawa-animate-in hawa-animate-out hawa-fade-out-0 hawa-fade-in-0 hawa-zoom-out-95"
-        // "data-[state=open]:hawa-zoom-in-95 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95"
-      ),
-      ref: innerRef,
-      ...innerProps
-    },
-    children
-  );
-};
-var Option = ({
-  cx,
-  children,
-  getStyles,
-  innerProps,
-  innerRef,
-  size = "normal",
-  ...props
-}) => {
-  return /* @__PURE__ */ React29.createElement(
-    "div",
-    {
-      ref: innerRef,
-      className: "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hover:hawa-bg-primary hawa-transition-all hover:hawa-text-primary-foreground ",
-      ...innerProps
-    },
-    children
-  );
-};
 var Select = (props) => {
   const Control = ({
     // cx,
@@ -4057,6 +4011,47 @@ var Select = (props) => {
   const NoOption = () => {
     return /* @__PURE__ */ React29.createElement("div", null, props.texts?.noOptions ?? "No Items Found");
   };
+  const Option = ({ children, innerProps, innerRef }) => {
+    return /* @__PURE__ */ React29.createElement(
+      "div",
+      {
+        ref: innerRef,
+        className: cn(
+          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hover:hawa-bg-primary hawa-transition-all hover:hawa-text-primary-foreground"
+        ),
+        ...innerProps
+      },
+      children
+    );
+  };
+  const Menu = ({
+    cx,
+    children,
+    getStyles,
+    innerProps,
+    innerRef,
+    ...menuProps
+  }) => {
+    const menuOpen = menuProps.selectProps.menuIsOpen;
+    return /* @__PURE__ */ React29.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-absolute  hawa-shadow-md dark:dark-shadow hawa-z-10 hawa-mt-1 hawa-flex hawa-flex-col hawa-justify-start  hawa-rounded  hawa-border hawa-bg-background",
+          props.phoneCode ? "hawa-p-1.5 hawa-pr-0" : "hawa-p-1.5 hawa-w-full",
+          menuOpen && "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "
+          // menuOpen
+          //   ? "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "
+          //   : "hawa-zoom-out-95 hawa-fade-out-0 hawa-animate-out"
+          // "hawa-zoom-in-95 hawa-animate-in hawa-animate-out hawa-fade-out-0 hawa-fade-in-0 hawa-zoom-out-95"
+          // "data-[state=open]:hawa-zoom-in-95 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95"
+        ),
+        ref: innerRef,
+        ...innerProps
+      },
+      children
+    );
+  };
   return /* @__PURE__ */ React29.createElement(
     "div",
     {
@@ -4066,63 +4061,54 @@ var Select = (props) => {
       )
     },
     props.label && /* @__PURE__ */ React29.createElement(Label, null, props.label),
-    props.isLoading ? /* @__PURE__ */ React29.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : !props.isCreatable ? /* @__PURE__ */ React29.createElement(
-      ReactSelect,
-      {
-        noOptionsMessage: NoOption,
-        classNames: {
-          // menuList: (d) => {
-          //   console.log("d is ", d.selectProps.menuIsOpen);
-          //   return cn(
-          //     "hawa-absolute hawa-shadow-md dark:dark-shadow hawa-z-10 hawa-mt-2 hawa-flex hawa-w-full  hawa-flex-col hawa-justify-start  hawa-rounded  hawa-border  hawa-bg-background  hawa-p-1.5",
-          //     d.selectProps.menuIsOpen
-          //       ? "hawa-zoom-in-95 hawa-animate-in hawa-fade-in-0 "
-          //       : "hawa-zoom-out-95 hawa-fade-out-0 hawa-animate-out"
-          //   );
-          // },
-          control: () => cn(
-            " hawa-text-sm hawa-flex hawa-p-2 hawa-w-full  hawa-rounded hawa-border hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500",
-            props.controlClassNames
-          ),
-          container: () => cn(
-            "hawa-rounded",
-            props.containerClassNames,
-            props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
-          ),
-          //   TODO: enable keyboard to go to the next item in the list
-          placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
-          input: () => "hawa-text-primary hawa-px-2",
-          valueContainer: () => "hawa-text-white dark:hawa-text-muted-foreground",
-          singleValue: () => "hawa-text-black dark:hawa-text-white hawa-px-2",
-          indicatorsContainer: () => " hawa-px-0 hawa-cursor-pointer hawa-text-muted-foreground"
-        },
-        unstyled: true,
-        isDisabled: props.disabled,
-        options: props.options,
-        defaultValue: props.defaultValue,
-        isClearable: props.isClearable,
-        isMulti: props.isMulti,
-        isSearchable: props.isSearchable,
-        placeholder: props.placeholder,
-        autoFocus: true,
-        onChange: (newValue, action) => (
-          // props.onChange(newValue.label, action)
-          props.onChange(newValue, action)
-        ),
-        components: {
-          // Control,
-          Option,
-          Menu
-        },
-        getOptionLabel: props.getOptionLabel
-      }
+    props.isLoading ? /* @__PURE__ */ React29.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : !props.isCreatable ? (
+      //   TODO: enable keyboard to go to the next item in the list
+      /* @__PURE__ */ React29.createElement(
+        ReactSelect,
+        {
+          noOptionsMessage: NoOption,
+          classNames: {
+            control: () => cn(
+              // "hawa-text-sm hawa-flex hawa-w-full hawa-rounded hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500 hawa-cursor-pointer hawa-border",
+              // "hawa-p-2",
+              props.phoneCode && "hawa-rounded-r-none",
+              props.controlClassNames
+            ),
+            container: () => cn(
+              "hawa-rounded",
+              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[37.5px] ",
+              "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+            ),
+            placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
+            valueContainer: () => "hawa-text-foreground hawa-px-1 ",
+            singleValue: () => "hawa-text-foreground",
+            indicatorsContainer: () => cn(
+              " hawa-px-0 hawa-cursor-pointer hawa-text-muted-foreground",
+              props.hideIndicator && "hawa-invisible"
+            )
+          },
+          unstyled: true,
+          isDisabled: props.disabled,
+          options: props.options,
+          defaultValue: props.defaultValue,
+          isClearable: props.isClearable,
+          isMulti: props.isMulti,
+          isSearchable: props.isSearchable,
+          placeholder: props.placeholder,
+          autoFocus: true,
+          onChange: (newValue, action) => props.onChange(newValue, action),
+          components: { Option, Menu, IndicatorsContainer: () => null },
+          getOptionLabel: props.getOptionLabel
+        }
+      )
     ) : /* @__PURE__ */ React29.createElement(
       CreatableSelect,
       {
         formatCreateLabel: (inputValue) => `${props.texts?.createLabel ?? "Create"} "${inputValue}"`,
         classNames: {
           container: () => cn(
-            "hawa-rounded ",
+            "hawa-rounded",
             props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
           ),
           placeholder: () => "hawa-px-2 hawa-text-muted-foreground",
@@ -4139,12 +4125,8 @@ var Select = (props) => {
         placeholder: props.placeholder,
         onCreateOption: props.handleCreateOption,
         onChange: (newValue, action) => props.onChange(newValue, action),
-        onInputChange: (newValue, action) => props.onInputChange(newValue, action),
-        components: {
-          Control,
-          Option,
-          Menu
-        }
+        components: { Control, Option, Menu },
+        onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
     props.helperText && /* @__PURE__ */ React29.createElement("p", { className: "hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)
@@ -4157,9 +4139,10 @@ var PhoneInput = (props) => {
   return /* @__PURE__ */ React30.createElement("div", { className: "hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ React30.createElement("label", { className: "hawa-mb-2 hawa-block hawa-text-sm hawa-font-medium" }, props.label), /* @__PURE__ */ React30.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full " }, /* @__PURE__ */ React30.createElement(
     Select,
     {
+      phoneCode: true,
+      hideIndicator: true,
       width: "fit",
-      controlClassNames: "hawa-rounded-r-none",
-      containerClassNames: "hawa-w-[100px] hawa-p-0 hawa-rounded-r-none",
+      placeholder: "Code",
       options: countries_default,
       isMulti: false,
       isSearchable: true,
@@ -5743,7 +5726,7 @@ var NavigationMenuList = React47.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-space-x-1",
+      "hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1",
       className
     ),
     ...props
@@ -5752,7 +5735,7 @@ var NavigationMenuList = React47.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva4(
-  "hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 data-[state=open]:hawa-bg-accent/50"
+  "hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 data-[state=open]:hawa-bg-accent/50"
 );
 var NavigationMenuTrigger = React47.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React47.createElement(
   NavigationMenuPrimitive.Trigger,
@@ -5776,7 +5759,7 @@ var NavigationMenuTrigger = React47.forwardRef(({ className, children, ...props
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       "aria-hidden": "true",
-      className: "hawa-relative hawa-top-[1px] hawa-ml-1 hawa-h-4 hawa-w-4 hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180"
+      className: "hawa-relative hawa-top-[1px] hawa-h-4 hawa-w-4 hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180"
     },
     /* @__PURE__ */ React47.createElement("path", { d: "m6 9 6 6 6-6" })
   )
@@ -5837,6 +5820,7 @@ var NavigationMenu = (props) => {
   return /* @__PURE__ */ React47.createElement(
     NavigationMenuRoot,
     {
+      dir: props.direction,
       delayDuration: 0,
       className: props.rootClassNames,
       viewportClassNames: props.viewportClassNames
@@ -6854,16 +6838,13 @@ var RegisterForm = (props) => {
         render: ({ field }) => /* @__PURE__ */ React54.createElement(
           Select,
           {
-            label: props.texts.userReferenceLabel || "How did you learn about us?",
+            label: props.texts?.userReferenceLabel || "How did you learn about us?",
+            placeholder: props.texts?.userReferencePlaceholder,
             isCreatable: false,
             isMulti: false,
             isSearchable: false,
             isClearable: false,
-            options: [
-              { value: "friend", label: "From a friend" },
-              { value: "ad", label: "Advertisement" },
-              { value: "other", label: "Other" }
-            ],
+            options: props.userReferenceOptions,
             onChange: (e) => {
               field.onChange(e.value);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.7.19-next",
+  "version": "0.8.0-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {