@sikka/hawa 0.7.16-next → 0.7.18-next

package/dist/index.css

@@ -844,6 +844,10 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.hawa-mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
 .hawa-my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1003,6 +1007,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-4 {
   height: 1rem;
 }
+.hawa-h-40 {
+  height: 10rem;
+}
 .hawa-h-5 {
   height: 1.25rem;
 }
@@ -1286,6 +1293,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-shrink-0 {
   flex-shrink: 0;
 }
+.hawa-flex-grow {
+  flex-grow: 1;
+}
 .hawa-grow {
   flex-grow: 1;
 }
@@ -1345,6 +1355,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-scale-y: 1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hawa-transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hawa-transform-gpu {
   transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1521,6 +1534,11 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
 }
+.hawa-space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
 .hawa-space-y-5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1718,10 +1736,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
-.hawa-bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
 .hawa-bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1901,6 +1915,10 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-fill-primary\/20 {
   fill: hsl(var(--primary) / 0.2);
 }
+.hawa-object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
 .hawa-p-0 {
   padding: 0px;
 }
@@ -2084,6 +2102,10 @@ input[type="number"]::-webkit-inner-spin-button,
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.hawa-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .hawa-text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -2217,6 +2239,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+.hawa-text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
 .hawa-text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));

package/dist/index.d.mts

@@ -20,6 +20,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 
 type ImageCardTypes = {
     children: any;
@@ -323,6 +324,8 @@ interface DropdownMenuProps {
     width?: "default" | "sm" | "lg" | "parent";
     size?: "default" | "sm";
     onItemSelect?: any;
+    onOpenChange?: any;
+    open?: any;
 }
 declare const DropdownMenu: React$1.FC<DropdownMenuProps>;
 
@@ -671,6 +674,13 @@ type TypographyTypes = {
 };
 declare const InterfaceSettings: FC<TypographyTypes>;
 
+declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+type NavMenuItemTypes = {
+    icon?: any;
+    title: string;
+    subtitle?: string;
+};
+declare const NavMenuItem: React$1.FC<NavMenuItemTypes>;
 type NavigationMenuTypes = {
     items: {
         trigger: any;
@@ -1410,4 +1420,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, NavigationMenu, 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, 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

@@ -20,6 +20,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 
 type ImageCardTypes = {
     children: any;
@@ -323,6 +324,8 @@ interface DropdownMenuProps {
     width?: "default" | "sm" | "lg" | "parent";
     size?: "default" | "sm";
     onItemSelect?: any;
+    onOpenChange?: any;
+    open?: any;
 }
 declare const DropdownMenu: React$1.FC<DropdownMenuProps>;
 
@@ -671,6 +674,13 @@ type TypographyTypes = {
 };
 declare const InterfaceSettings: FC<TypographyTypes>;
 
+declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+type NavMenuItemTypes = {
+    icon?: any;
+    title: string;
+    subtitle?: string;
+};
+declare const NavMenuItem: React$1.FC<NavMenuItemTypes>;
 type NavigationMenuTypes = {
     items: {
         trigger: any;
@@ -1410,4 +1420,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, NavigationMenu, 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, 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

@@ -550,9 +550,15 @@ __export(components_exports, {
     Logos: function() {
         return Logos;
     },
+    NavMenuItem: function() {
+        return NavMenuItem;
+    },
     NavigationMenu: function() {
         return NavigationMenu;
     },
+    NavigationMenuLink: function() {
+        return NavigationMenuLink;
+    },
     NewPasswordForm: function() {
         return NewPasswordForm;
     },
@@ -2154,7 +2160,6 @@ var DropdownMenuItem = React24.forwardRef(function(_param, ref) {
         "className",
         "inset"
     ]);
-    console.log("sdsdsds", props.children);
     return /* @__PURE__ */ React24.createElement(DropdownMenuPrimitive.Item, _object_spread({
         disabled: props.disabled,
         ref: ref,
@@ -2249,7 +2254,7 @@ var DropdownMenuShortcut = function(_param) {
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var DropdownMenu = function(param) {
-    var trigger = param.trigger, items = param.items, direction = param.direction, sideOffset = param.sideOffset, side = param.side, className = param.className, triggerClassname = param.triggerClassname, align = param.align, alignOffset = param.alignOffset, onItemSelect = param.onItemSelect, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size, _param_width = param.width, width = _param_width === void 0 ? "default" : _param_width;
+    var trigger = param.trigger, items = param.items, direction = param.direction, sideOffset = param.sideOffset, side = param.side, className = param.className, triggerClassname = param.triggerClassname, align = param.align, alignOffset = param.alignOffset, onItemSelect = param.onItemSelect, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size, _param_width = param.width, width = _param_width === void 0 ? "default" : _param_width, onOpenChange = param.onOpenChange, open = param.open;
     var widthStyles = {
         default: "hawa-min-w-[8rem]",
         sm: "hawa-w-fit",
@@ -2261,6 +2266,8 @@ var DropdownMenu = function(param) {
         sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
     };
     return /* @__PURE__ */ React24.createElement(DropdownMenuRoot, {
+        onOpenChange: onOpenChange,
+        open: open,
         modal: false,
         dir: direction
     }, /* @__PURE__ */ React24.createElement(DropdownMenuTrigger, {
@@ -6045,7 +6052,7 @@ var NavigationMenuRoot = React47.forwardRef(function(_param, ref) /* @__PURE__ *
     ]);
     return React47.createElement(NavigationMenuPrimitive.Root, _object_spread({
         ref: ref,
-        className: cn("hawa-relative hawa-bg-yellow-400 hawa-p-2 hawa-z-10 hawa-flex hawa-max-w-max hawa-flex-1 hawa-items-center hawa-justify-center", className)
+        className: cn("hawa-relative hawa-z-10 hawa-flex hawa-max-w-max hawa-flex-1 hawa-items-center hawa-justify-center", className)
     }, props), children, /* @__PURE__ */ React47.createElement(NavigationMenuViewport, null));
 });
 NavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;
@@ -6055,7 +6062,7 @@ var NavigationMenuList = React47.forwardRef(function(_param, ref) /* @__PURE__ *
     ]);
     return React47.createElement(NavigationMenuPrimitive.List, _object_spread({
         ref: ref,
-        className: cn("hawa-group hawa-bg-blue-400 hawa-p-2 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-space-x-1", className)
     }, props));
 });
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
@@ -6092,20 +6099,33 @@ var NavigationMenuContent = React47.forwardRef(function(_param, ref) /* @__PURE_
     ]);
     return React47.createElement(NavigationMenuPrimitive.Content, _object_spread({
         ref: ref,
-        className: cn("hawa-bg-green-400 hawa-p-2  hawa-w-full md:hawa-absolute hawa-left-0 hawa-top-0 md:hawa-w-auto ", //   animation
+        className: cn("hawa-absolute hawa-w-auto  hawa-left-0 hawa-top-0 ", // "md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 ",
+        //   animation
         "data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52", className)
     }, props));
 });
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
+var NavMenuItem = function(props) {
+    return /* @__PURE__ */ React47.createElement(NavigationMenuLink, null, /* @__PURE__ */ React47.createElement("div", {
+        className: "hawa-max-w-md hawa-cursor-pointer hawa-p-4 hawa-py-2 hawa-rounded hawa-flex hawa-flex-row hawa-gap-4 hawa-items-center hawa-transition-all  hover:hawa-bg-muted"
+    }, props.icon && props.icon, /* @__PURE__ */ React47.createElement("div", {
+        className: "hawa-flex hawa-flex-col"
+    }, /* @__PURE__ */ React47.createElement("h1", {
+        className: "hawa-font-bold "
+    }, props.title), /* @__PURE__ */ React47.createElement("p", {
+        className: "hawa-text-sm"
+    }, props.subtitle))));
+};
 var NavigationMenuViewport = React47.forwardRef(function(_param, ref) /* @__PURE__ */ {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
     return React47.createElement("div", {
-        className: cn("hawa-absolute hawa-left-0 hawa-top-full hawa-flex hawa-justify-center")
+        className: cn("hawa-absolute hawa-w-full hawa-top-full hawa-flex hawa-justify-center")
     }, /* @__PURE__ */ React47.createElement(NavigationMenuPrimitive.Viewport, _object_spread({
-        className: cn("hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-h-[var(--radix-navigation-menu-viewport-height)] hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 md:hawa-w-[var(--radix-navigation-menu-viewport-width)]", className),
+        className: cn("hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-h-[var(--radix-navigation-menu-viewport-height)] hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 ", // "md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
+        className),
         ref: ref
     }, props)));
 });
@@ -6123,11 +6143,13 @@ var NavigationMenuIndicator = React47.forwardRef(function(_param, ref) /* @__PUR
 });
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 var NavigationMenu = function(props) {
-    return /* @__PURE__ */ React47.createElement(NavigationMenuRoot, null, /* @__PURE__ */ React47.createElement(NavigationMenuList, null, props.items.map(function(item, i) {
+    return /* @__PURE__ */ React47.createElement(NavigationMenuRoot, {
+        delayDuration: 0
+    }, /* @__PURE__ */ React47.createElement(NavigationMenuList, null, props.items.map(function(item, i) {
         return /* @__PURE__ */ React47.createElement(NavigationMenuItem, {
             key: i
         }, item.content ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(NavigationMenuTrigger, null, item.trigger), /* @__PURE__ */ React47.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React47.createElement(NavigationMenuLink, {
-            className: navigationMenuTriggerStyle()
+            className: cn(navigationMenuTriggerStyle(), "hawa-cursor-pointer hawa-select-none")
         }, item.trigger));
     })));
 };
@@ -8581,7 +8603,9 @@ function useTabs() {
     Loading: Loading,
     LoginForm: LoginForm,
     Logos: Logos,
+    NavMenuItem: NavMenuItem,
     NavigationMenu: NavigationMenu,
+    NavigationMenuLink: NavigationMenuLink,
     NewPasswordForm: NewPasswordForm,
     NoPermission: NoPermission,
     NotFound: NotFound,

package/dist/index.mjs

@@ -1648,7 +1648,6 @@ var DropdownMenuContent = React24.forwardRef(({ className, sideOffset = 4, ...pr
 )));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React24.forwardRef(({ className, inset, ...props }, ref) => {
-  console.log("sdsdsds", props.children);
   return /* @__PURE__ */ React24.createElement(
     DropdownMenuPrimitive.Item,
     {
@@ -1774,7 +1773,9 @@ var DropdownMenu = ({
   alignOffset,
   onItemSelect,
   size = "default",
-  width = "default"
+  width = "default",
+  onOpenChange,
+  open
 }) => {
   const widthStyles = {
     default: "hawa-min-w-[8rem]",
@@ -1786,86 +1787,96 @@ var DropdownMenu = ({
     default: "hawa-px-2 hawa-py-3 ",
     sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
   };
-  return /* @__PURE__ */ React24.createElement(DropdownMenuRoot, { modal: false, dir: direction }, /* @__PURE__ */ React24.createElement(DropdownMenuTrigger, { asChild: true, className: triggerClassname }, trigger), /* @__PURE__ */ React24.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React24.createElement(
-    DropdownMenuContent,
+  return /* @__PURE__ */ React24.createElement(
+    DropdownMenuRoot,
     {
-      side,
-      sideOffset,
-      className: cn(
-        className,
-        widthStyles[width],
-        "hawa-flex hawa-flex-col hawa-gap-1"
-      ),
-      align,
-      alignOffset
+      onOpenChange,
+      open,
+      modal: false,
+      dir: direction
     },
-    items && items.map((item, index) => {
-      if (item.itemType === "separator") {
-        return /* @__PURE__ */ React24.createElement(DropdownMenuSeparator, { key: index });
-      } else if (item.itemType === "label") {
-        return /* @__PURE__ */ React24.createElement(DropdownMenuLabel, { key: index }, item.label);
-      } else if (item.itemType === "custom") {
-        return /* @__PURE__ */ React24.createElement("div", { key: index }, item.content);
-      } else {
-        return item.subitems ? /* @__PURE__ */ React24.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React24.createElement(
-          DropdownMenuSubTrigger,
-          {
-            className: cn(sizeStyles[size]),
-            dir: direction
-          },
-          item.icon && item.icon,
-          item.label && item.label
-        ), /* @__PURE__ */ React24.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React24.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React24.createElement(
-          DropdownMenuItem,
-          {
-            key: subIndex,
-            className: cn(
-              sizeStyles[size],
-              !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent"
-            ),
-            disabled: subitem.disabled,
-            onSelect: () => {
-              subitem.action && subitem.action();
-              if (onItemSelect) {
-                onItemSelect(subitem.value);
-              }
-            }
-          },
-          subitem.icon && subitem.icon,
-          subitem.label && subitem.label
-        ))))) : /* @__PURE__ */ React24.createElement(
-          DropdownMenuItem,
-          {
-            key: index,
-            disabled: item.disabled,
-            onSelect: (e) => {
-              if (item.presist) {
-                e.preventDefault();
-              }
-              if (item.action) {
-                item.action();
-                if (onItemSelect) {
-                  onItemSelect(item.value);
-                }
-              } else {
+    /* @__PURE__ */ React24.createElement(DropdownMenuTrigger, { asChild: true, className: triggerClassname }, trigger),
+    /* @__PURE__ */ React24.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React24.createElement(
+      DropdownMenuContent,
+      {
+        side,
+        sideOffset,
+        className: cn(
+          className,
+          widthStyles[width],
+          "hawa-flex hawa-flex-col hawa-gap-1"
+        ),
+        align,
+        alignOffset
+      },
+      items && items.map((item, index) => {
+        if (item.itemType === "separator") {
+          return /* @__PURE__ */ React24.createElement(DropdownMenuSeparator, { key: index });
+        } else if (item.itemType === "label") {
+          return /* @__PURE__ */ React24.createElement(DropdownMenuLabel, { key: index }, item.label);
+        } else if (item.itemType === "custom") {
+          return /* @__PURE__ */ React24.createElement("div", { key: index }, item.content);
+        } else {
+          return item.subitems ? /* @__PURE__ */ React24.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React24.createElement(
+            DropdownMenuSubTrigger,
+            {
+              className: cn(sizeStyles[size]),
+              dir: direction
+            },
+            item.icon && item.icon,
+            item.label && item.label
+          ), /* @__PURE__ */ React24.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React24.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React24.createElement(
+            DropdownMenuItem,
+            {
+              key: subIndex,
+              className: cn(
+                sizeStyles[size],
+                !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent"
+              ),
+              disabled: subitem.disabled,
+              onSelect: () => {
+                subitem.action && subitem.action();
                 if (onItemSelect) {
-                  onItemSelect(item.value);
+                  onItemSelect(subitem.value);
                 }
               }
             },
-            end: item.end,
-            className: cn(
-              sizeStyles[size],
-              !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent " : "focus:hawa-bg-accent ",
-              item.presist && "focus:hawa-bg-transparent"
-            )
-          },
-          item.icon && item.icon,
-          item.label && item.label
-        );
-      }
-    })
-  )));
+            subitem.icon && subitem.icon,
+            subitem.label && subitem.label
+          ))))) : /* @__PURE__ */ React24.createElement(
+            DropdownMenuItem,
+            {
+              key: index,
+              disabled: item.disabled,
+              onSelect: (e) => {
+                if (item.presist) {
+                  e.preventDefault();
+                }
+                if (item.action) {
+                  item.action();
+                  if (onItemSelect) {
+                    onItemSelect(item.value);
+                  }
+                } else {
+                  if (onItemSelect) {
+                    onItemSelect(item.value);
+                  }
+                }
+              },
+              end: item.end,
+              className: cn(
+                sizeStyles[size],
+                !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent " : "focus:hawa-bg-accent ",
+                item.presist && "focus:hawa-bg-transparent"
+              )
+            },
+            item.icon && item.icon,
+            item.label && item.label
+          );
+        }
+      })
+    ))
+  );
 };
 
 // components/elements/ColorPicker.tsx
@@ -5717,7 +5728,7 @@ var NavigationMenuRoot = React47.forwardRef(({ className, children, ...props },
   {
     ref,
     className: cn(
-      "hawa-relative hawa-bg-yellow-400 hawa-p-2 hawa-z-10 hawa-flex hawa-max-w-max hawa-flex-1 hawa-items-center hawa-justify-center",
+      "hawa-relative hawa-z-10 hawa-flex hawa-max-w-max hawa-flex-1 hawa-items-center hawa-justify-center",
       className
     ),
     ...props
@@ -5731,7 +5742,7 @@ var NavigationMenuList = React47.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "hawa-group hawa-bg-blue-400 hawa-p-2 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-space-x-1",
       className
     ),
     ...props
@@ -5775,7 +5786,8 @@ var NavigationMenuContent = React47.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "hawa-bg-green-400 hawa-p-2  hawa-w-full md:hawa-absolute hawa-left-0 hawa-top-0 md:hawa-w-auto ",
+      "hawa-absolute hawa-w-auto  hawa-left-0 hawa-top-0 ",
+      // "md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 ",
       //   animation
       "data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52",
       className
@@ -5785,18 +5797,20 @@ var NavigationMenuContent = React47.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
+var NavMenuItem = (props) => /* @__PURE__ */ React47.createElement(NavigationMenuLink, null, /* @__PURE__ */ React47.createElement("div", { className: "hawa-max-w-md hawa-cursor-pointer hawa-p-4 hawa-py-2 hawa-rounded hawa-flex hawa-flex-row hawa-gap-4 hawa-items-center hawa-transition-all  hover:hawa-bg-muted" }, props.icon && props.icon, /* @__PURE__ */ React47.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React47.createElement("h1", { className: "hawa-font-bold " }, props.title), /* @__PURE__ */ React47.createElement("p", { className: "hawa-text-sm" }, props.subtitle))));
 var NavigationMenuViewport = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React47.createElement(
   "div",
   {
     className: cn(
-      "hawa-absolute hawa-left-0 hawa-top-full hawa-flex hawa-justify-center"
+      "hawa-absolute hawa-w-full hawa-top-full hawa-flex hawa-justify-center"
     )
   },
   /* @__PURE__ */ React47.createElement(
     NavigationMenuPrimitive.Viewport,
     {
       className: cn(
-        "hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-h-[var(--radix-navigation-menu-viewport-height)] hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
+        "hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-h-[var(--radix-navigation-menu-viewport-height)] hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90 ",
+        // "md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),
       ref,
@@ -5819,7 +5833,16 @@ var NavigationMenuIndicator = React47.forwardRef(({ className, ...props }, ref)
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 var NavigationMenu = (props) => {
-  return /* @__PURE__ */ React47.createElement(NavigationMenuRoot, null, /* @__PURE__ */ React47.createElement(NavigationMenuList, null, props.items.map((item, i) => /* @__PURE__ */ React47.createElement(NavigationMenuItem, { key: i }, item.content ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(NavigationMenuTrigger, null, item.trigger), /* @__PURE__ */ React47.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React47.createElement(NavigationMenuLink, { className: navigationMenuTriggerStyle() }, item.trigger)))));
+  return /* @__PURE__ */ React47.createElement(NavigationMenuRoot, { delayDuration: 0 }, /* @__PURE__ */ React47.createElement(NavigationMenuList, null, props.items.map((item, i) => /* @__PURE__ */ React47.createElement(NavigationMenuItem, { key: i }, item.content ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(NavigationMenuTrigger, null, item.trigger), /* @__PURE__ */ React47.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React47.createElement(
+    NavigationMenuLink,
+    {
+      className: cn(
+        navigationMenuTriggerStyle(),
+        "hawa-cursor-pointer hawa-select-none"
+      )
+    },
+    item.trigger
+  )))));
 };
 
 // components/layout/Stats.tsx
@@ -8380,7 +8403,9 @@ export {
   Loading,
   LoginForm,
   Logos,
+  NavMenuItem,
   NavigationMenu,
+  NavigationMenuLink,
   NewPasswordForm,
   NoPermission,
   NotFound,

package/package.json

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