@sikka/hawa 0.48.0-next → 0.49.0-next

package/dist/appLayout/index.mjs

@@ -13,21 +13,15 @@ function useClickOutside(handler, events, nodes) {
       const { target } = event != null ? event : {};
       if (Array.isArray(nodes)) {
         const shouldIgnore = (target == null ? void 0 : target.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(target) && target.tagName !== "HTML";
-        const shouldTrigger = nodes.every(
-          (node) => !!node && !event.composedPath().includes(node)
-        );
+        const shouldTrigger = nodes.every((node) => !!node && !event.composedPath().includes(node));
         shouldTrigger && !shouldIgnore && handler();
       } else if (ref.current && !ref.current.contains(target)) {
         handler();
       }
     };
-    (events || DEFAULT_EVENTS).forEach(
-      (fn) => document.addEventListener(fn, listener)
-    );
+    (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener));
     return () => {
-      (events || DEFAULT_EVENTS).forEach(
-        (fn) => document.removeEventListener(fn, listener)
-      );
+      (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener));
     };
   }, [ref, handler, nodes]);
   return ref;
@@ -49,9 +43,7 @@ import { cva } from "class-variance-authority";
 
 // elements/helperText/HelperText.tsx
 import React from "react";
-var HelperText = ({
-  helperText
-}) => /* @__PURE__ */ React.createElement(
+var HelperText = ({ helperText }) => /* @__PURE__ */ React.createElement(
   "p",
   {
     className: cn(
@@ -102,38 +94,31 @@ var Tooltip = ({
   delayDuration = 300,
   ...props
 }) => {
-  return /* @__PURE__ */ React2.createElement(
-    TooltipPrimitive.TooltipProvider,
+  return /* @__PURE__ */ React2.createElement(TooltipPrimitive.TooltipProvider, { delayDuration, ...providerProps }, /* @__PURE__ */ React2.createElement(
+    TooltipPrimitive.Root,
     {
-      delayDuration,
-      ...providerProps
+      open: !disabled && open,
+      defaultOpen,
+      onOpenChange,
+      ...props
     },
+    /* @__PURE__ */ React2.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
     /* @__PURE__ */ React2.createElement(
-      TooltipPrimitive.Root,
+      TooltipContent,
       {
-        open: !disabled && open,
-        defaultOpen,
-        onOpenChange,
-        ...props
+        size,
+        side,
+        align: "center",
+        ...contentProps,
+        style: {
+          ...contentProps == null ? void 0 : contentProps.style,
+          maxWidth: "var(--radix-tooltip-content-available-width)",
+          maxHeight: "var(--radix-tooltip-content-available-height)"
+        }
       },
-      /* @__PURE__ */ React2.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
-      /* @__PURE__ */ React2.createElement(
-        TooltipContent,
-        {
-          size,
-          side,
-          align: "center",
-          ...contentProps,
-          style: {
-            ...contentProps == null ? void 0 : contentProps.style,
-            maxWidth: "var(--radix-tooltip-content-available-width)",
-            maxHeight: "var(--radix-tooltip-content-available-height)"
-          }
-        },
-        content
-      )
+      content
     )
-  );
+  ));
 };
 
 // elements/label/Label.tsx
@@ -210,57 +195,42 @@ var Loading = ({
   };
   switch (design.split("-")[0]) {
     case "dots":
-      return /* @__PURE__ */ React4.createElement(
+      return /* @__PURE__ */ React4.createElement("div", { className: cn("hawa-flex hawa-flex-row hawa-gap-2", classNames == null ? void 0 : classNames.container) }, /* @__PURE__ */ React4.createElement(
         "div",
         {
           className: cn(
-            "hawa-flex hawa-flex-row hawa-gap-2",
-            classNames == null ? void 0 : classNames.container
+            "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
+            size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+            animationStyles[design.split("-")[1]],
+            color ? color : "hawa-bg-primary"
           )
-        },
-        /* @__PURE__ */ React4.createElement(
-          "div",
-          {
-            className: cn(
-              "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
-              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "hawa-bg-primary"
-            )
-          }
-        ),
-        /* @__PURE__ */ React4.createElement(
-          "div",
-          {
-            className: cn(
-              "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
-              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "hawa-bg-primary"
-            )
-          }
-        ),
-        /* @__PURE__ */ React4.createElement(
-          "div",
-          {
-            className: cn(
-              "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
-              size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "hawa-bg-primary"
-            )
-          }
-        )
-      );
+        }
+      ), /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
+            size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+            animationStyles[design.split("-")[1]],
+            color ? color : "hawa-bg-primary"
+          )
+        }
+      ), /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
+            size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
+            animationStyles[design.split("-")[1]],
+            color ? color : "hawa-bg-primary"
+          )
+        }
+      ));
     case "square":
       return /* @__PURE__ */ React4.createElement(
         "svg",
         {
-          className: cn(
-            "squircle-container",
-            sizeStyles[size],
-            classNames == null ? void 0 : classNames.container
-          ),
+          className: cn("squircle-container", sizeStyles[size], classNames == null ? void 0 : classNames.container),
           viewBox: "0 0 35 35",
           height: "35",
           width: "35"
@@ -301,11 +271,7 @@ var Loading = ({
           height: "37",
           width: "37",
           preserveAspectRatio: "xMidYMid meet",
-          className: cn(
-            "squircle-container",
-            sizeStyles[size],
-            classNames == null ? void 0 : classNames.container
-          )
+          className: cn("squircle-container", sizeStyles[size], classNames == null ? void 0 : classNames.container)
         },
         /* @__PURE__ */ React4.createElement(
           "path",
@@ -348,11 +314,7 @@ var Loading = ({
           viewBox: "0 0 40 40",
           height: "40",
           width: "40",
-          className: cn(
-            "circle-container",
-            sizeStyles[size],
-            classNames == null ? void 0 : classNames.container
-          )
+          className: cn("circle-container", sizeStyles[size], classNames == null ? void 0 : classNames.container)
         },
         /* @__PURE__ */ React4.createElement(
           "circle",
@@ -659,17 +621,11 @@ var DropdownMenuSeparator = React6.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var DropdownMenuShortcut = ({
-  className,
-  ...props
-}) => {
+var DropdownMenuShortcut = ({ className, ...props }) => {
   return /* @__PURE__ */ React6.createElement(
     "span",
     {
-      className: cn(
-        "hawa-text-xs hawa-tracking-widest hawa-opacity-60",
-        className
-      ),
+      className: cn("hawa-text-xs hawa-tracking-widest hawa-opacity-60", className),
       ...props
     }
   );
@@ -706,178 +662,144 @@ var DropdownMenu = ({
     default: "hawa-px-2 hawa-py-3 ",
     sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
   };
-  let [values, setValues] = React6.useState(
-    items.map((item) => item.currentOption)
-  );
-  return /* @__PURE__ */ React6.createElement(
-    DropdownMenuRoot,
+  let [values, setValues] = React6.useState(items.map((item) => item.currentOption));
+  return /* @__PURE__ */ React6.createElement(DropdownMenuRoot, { onOpenChange, open, modal: false, dir: direction }, /* @__PURE__ */ React6.createElement(
+    DropdownMenuTrigger,
     {
-      onOpenChange,
-      open,
-      modal: false,
-      dir: direction
+      asChild: true,
+      className: cn(classNames == null ? void 0 : classNames.trigger, triggerClassname),
+      ...triggerProps
     },
-    /* @__PURE__ */ React6.createElement(
-      DropdownMenuTrigger,
-      {
-        asChild: true,
-        className: cn(classNames == null ? void 0 : classNames.trigger, triggerClassname),
-        ...triggerProps
-      },
-      trigger
-    ),
-    /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
-      DropdownMenuContent,
-      {
-        side,
-        sideOffset,
-        align,
-        alignOffset,
-        className: cn(
-          className,
-          classNames == null ? void 0 : classNames.content,
-          widthStyles[width],
-          "hawa-flex hawa-flex-col hawa-gap-1 hawa-overflow-y-auto"
-        ),
-        style: {
-          maxHeight: "var(--radix-dropdown-menu-content-available-height)"
-        },
-        ...contentProps
+    trigger
+  ), /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
+    DropdownMenuContent,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      className: cn(
+        className,
+        classNames == null ? void 0 : classNames.content,
+        widthStyles[width],
+        "hawa-flex hawa-flex-col hawa-gap-1 hawa-overflow-y-auto"
+      ),
+      style: {
+        maxHeight: "var(--radix-dropdown-menu-content-available-height)"
       },
-      header && header,
-      items && items.map((item, index) => {
-        var _a;
-        const ItemLinkComponent = item.slug ? LinkComponent : "a";
-        if (item.itemType === "separator") {
-          return /* @__PURE__ */ React6.createElement(
-            DropdownMenuSeparator,
-            {
-              key: index,
-              className: classNames == null ? void 0 : classNames.separator
-            }
-          );
-        } else if (item.itemType === "label") {
-          return /* @__PURE__ */ React6.createElement(DropdownMenuLabel, { key: index }, item.label);
-        } else if (item.itemType === "radio") {
-          let dd = item.currentOption;
-          return /* @__PURE__ */ React6.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React6.createElement(
-            DropdownMenuSubTrigger,
-            {
-              dir: direction,
-              className: cn(sizeStyles[size])
-            },
-            item.icon && item.icon,
-            item.label && item.label
-          ), /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React6.createElement(
-            DropdownMenuRadioGroup,
-            {
-              value: values[index],
-              onValueChange: (e) => {
-                let newValues = [...values];
-                newValues[index] = e;
-                setValues(newValues);
-                console.log("changing to ", e);
-                if (item.onOptionChange) {
-                  item.onOptionChange(e);
-                }
+      ...contentProps
+    },
+    header && header,
+    items && items.map((item, index) => {
+      var _a;
+      const ItemLinkComponent = item.slug ? LinkComponent : "a";
+      if (item.itemType === "separator") {
+        return /* @__PURE__ */ React6.createElement(DropdownMenuSeparator, { key: index, className: classNames == null ? void 0 : classNames.separator });
+      } else if (item.itemType === "label") {
+        return /* @__PURE__ */ React6.createElement(DropdownMenuLabel, { key: index }, item.label);
+      } else if (item.itemType === "radio") {
+        let dd = item.currentOption;
+        return /* @__PURE__ */ React6.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React6.createElement(DropdownMenuSubTrigger, { dir: direction, className: cn(sizeStyles[size]) }, item.icon && item.icon, item.label && item.label), /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React6.createElement(
+          DropdownMenuRadioGroup,
+          {
+            value: values[index],
+            onValueChange: (e) => {
+              let newValues = [...values];
+              newValues[index] = e;
+              setValues(newValues);
+              console.log("changing to ", e);
+              if (item.onOptionChange) {
+                item.onOptionChange(e);
               }
-            },
-            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React6.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
-          )));
-        } else if (item.itemType === "custom") {
-          return /* @__PURE__ */ React6.createElement("div", { key: index }, item.content);
-        } else {
-          return item.subitems ? /* @__PURE__ */ React6.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React6.createElement(
-            DropdownMenuSubTrigger,
-            {
-              dir: direction,
-              className: cn(sizeStyles[size])
-            },
-            item.icon && item.icon,
-            item.label && item.label
-          ), /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
-            const SubitemLinkComponent = subitem.slug ? LinkComponent : "a";
-            return /* @__PURE__ */ React6.createElement(
-              DropdownMenuItem,
-              {
-                key: subIndex,
-                LinkComponent: SubitemLinkComponent,
-                slug: subitem.slug,
-                disabled: subitem.disabled,
-                className: cn(
-                  sizeStyles[size],
-                  !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent"
-                ),
-                onMouseDown: (event) => {
-                  if (event.button === 1 || event.button === 0 && event.ctrlKey) {
-                    event.preventDefault();
-                    if (subitem.onMiddleClick) {
-                      subitem.onMiddleClick(item.value);
-                    }
-                  }
-                },
-                onSelect: () => {
-                  subitem.action && subitem.action();
-                  if (onItemSelect) {
-                    onItemSelect(subitem.value);
-                  }
-                }
-              },
-              subitem.icon && subitem.icon,
-              subitem.label && subitem.label
-            );
-          })))) : /* @__PURE__ */ React6.createElement(
+            }
+          },
+          (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React6.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
+        )));
+      } else if (item.itemType === "custom") {
+        return /* @__PURE__ */ React6.createElement("div", { key: index }, item.content);
+      } else {
+        return item.subitems ? /* @__PURE__ */ React6.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React6.createElement(DropdownMenuSubTrigger, { dir: direction, className: cn(sizeStyles[size]) }, item.icon && item.icon, item.label && item.label), /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
+          const SubitemLinkComponent = subitem.slug ? LinkComponent : "a";
+          return /* @__PURE__ */ React6.createElement(
             DropdownMenuItem,
             {
-              LinkComponent: ItemLinkComponent,
-              slug: item.slug,
-              key: index,
-              disabled: item.disabled,
+              key: subIndex,
+              LinkComponent: SubitemLinkComponent,
+              slug: subitem.slug,
+              disabled: subitem.disabled,
+              className: cn(
+                sizeStyles[size],
+                !item.icon && !item.label ? "hawa-px-0 hawa-py-0 focus:hawa-bg-transparent" : "focus:hawa-bg-accent"
+              ),
               onMouseDown: (event) => {
                 if (event.button === 1 || event.button === 0 && event.ctrlKey) {
                   event.preventDefault();
-                  if (item.onMiddleClick) {
-                    item.onMiddleClick(item.value);
+                  if (subitem.onMiddleClick) {
+                    subitem.onMiddleClick(item.value);
                   }
                 }
               },
-              onClick: (event) => {
-                if (item.onClick) {
-                  item.onClick(item.value);
+              onSelect: () => {
+                subitem.action && subitem.action();
+                if (onItemSelect) {
+                  onItemSelect(subitem.value);
                 }
-              },
-              onSelect: (e) => {
-                if (item.presist) {
-                  e.preventDefault();
+              }
+            },
+            subitem.icon && subitem.icon,
+            subitem.label && subitem.label
+          );
+        })))) : /* @__PURE__ */ React6.createElement(
+          DropdownMenuItem,
+          {
+            LinkComponent: ItemLinkComponent,
+            slug: item.slug,
+            key: index,
+            disabled: item.disabled,
+            onMouseDown: (event) => {
+              if (event.button === 1 || event.button === 0 && event.ctrlKey) {
+                event.preventDefault();
+                if (item.onMiddleClick) {
+                  item.onMiddleClick(item.value);
                 }
-                if (item.action) {
-                  item.action();
-                  if (onItemSelect) {
-                    onItemSelect(item.value);
-                  }
-                } else {
-                  if (onItemSelect) {
-                    onItemSelect(item.value);
-                  }
+              }
+            },
+            onClick: (event) => {
+              if (item.onClick) {
+                item.onClick(item.value);
+              }
+            },
+            onSelect: (e) => {
+              if (item.presist) {
+                e.preventDefault();
+              }
+              if (item.action) {
+                item.action();
+                if (onItemSelect) {
+                  onItemSelect(item.value);
                 }
-              },
-              end: item.end,
-              shortcut: item.shortcut,
-              badged: item.badged,
-              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",
-                classNames == null ? void 0 : classNames.item
-              )
+              } else {
+                if (onItemSelect) {
+                  onItemSelect(item.value);
+                }
+              }
             },
-            item.icon && item.icon,
-            item.label && item.label
-          );
-        }
-      })
-    ))
-  );
+            end: item.end,
+            shortcut: item.shortcut,
+            badged: item.badged,
+            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",
+              classNames == null ? void 0 : classNames.item
+            )
+          },
+          item.icon && item.icon,
+          item.label && item.label
+        );
+      }
+    })
+  )));
 };
 
 // icons/Emojis.tsx
@@ -917,16 +839,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 // elements/chip/Chip.tsx
 import React10 from "react";
 var Chip = React10.forwardRef(
-  ({
-    label,
-    size = "normal",
-    icon,
-    color,
-    radius = "inherit",
-    dot,
-    dotStatus = "none",
-    ...rest
-  }, ref) => {
+  ({ label, size = "normal", icon, color, radius = "inherit", dot, dotStatus = "none", ...rest }, ref) => {
     let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
     let radiusStyles = {
       inherit: " hawa-rounded",
@@ -973,12 +886,7 @@ var Chip = React10.forwardRef(
             rest.className
           )
         },
-        dot && /* @__PURE__ */ React10.createElement(
-          "span",
-          {
-            className: cn(dotStyles[size], dotStatusStyles[dotStatus])
-          }
-        ),
+        dot && /* @__PURE__ */ React10.createElement("span", { className: cn(dotStyles[size], dotStatusStyles[dotStatus]) }),
         icon && icon,
         label
       );
@@ -1003,28 +911,19 @@ var Accordion = AccordionPrimitive.Root;
 var triggerStyles = "hawa-flex hawa-flex-1 hawa-items-center hawa-duration-75 hawa-select-none hawa-cursor-pointer  hawa-rounded hawa-justify-between hawa-p-2 hawa-px-3 hawa-font-medium hawa-transition-all  [&[data-state=open]>svg]:hawa--rotate-90";
 var AccordionItem = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React11.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React11.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React11.createElement(
-  AccordionPrimitive.Trigger,
+var AccordionTrigger = React11.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React11.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React11.createElement(AccordionPrimitive.Trigger, { ref, className: cn(triggerStyles, className), ...props }, children, showArrow && /* @__PURE__ */ React11.createElement(
+  "svg",
   {
-    ref,
-    className: cn(triggerStyles, className),
-    ...props
+    "aria-label": "Chevron Right Icon",
+    stroke: "currentColor",
+    fill: "currentColor",
+    viewBox: "0 0 16 16",
+    height: "1em",
+    width: "1em",
+    className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
   },
-  children,
-  showArrow && /* @__PURE__ */ React11.createElement(
-    "svg",
-    {
-      "aria-label": "Chevron Right Icon",
-      stroke: "currentColor",
-      fill: "currentColor",
-      viewBox: "0 0 16 16",
-      height: "1em",
-      width: "1em",
-      className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
-    },
-    /* @__PURE__ */ React11.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
-  )
-)));
+  /* @__PURE__ */ React11.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+))));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 var AccordionContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   AccordionPrimitive.Content,
@@ -1078,111 +977,78 @@ var SidebarGroup = ({
     ))
   )));
 };
-var SidebarItem = ({
-  item,
-  onItemClick,
-  onSubItemClick,
-  direction,
-  isOpen = true,
-  LinkComponent,
-  ...props
-}) => {
+var SidebarItem = ({ item, onItemClick, onSubItemClick, direction, isOpen = true, LinkComponent, ...props }) => {
   const getSelectedStyle = (value) => {
     return props.selectedItem === value ? "hawa-bg-primary/90 hawa-text-primary-foreground  hawa-cursor-default" : "hover:hawa-bg-primary/10";
   };
   if (item.subitems) {
-    return /* @__PURE__ */ React11.createElement(
-      AccordionItem,
+    return /* @__PURE__ */ React11.createElement(AccordionItem, { value: item.value, className: "hawa-overflow-x-clip", dir: direction }, /* @__PURE__ */ React11.createElement(
+      AccordionTrigger,
       {
-        value: item.value,
-        className: "hawa-overflow-x-clip",
-        dir: direction
+        className: cn(
+          "hawa-w-full hawa-overflow-x-clip",
+          props.selectedItem === item.value ? "hawa-cursor-default hawa-bg-primary hawa-text-primary-foreground" : "hawa-h-10 hover:hawa-bg-primary/10",
+          item.subitems && item.subitems.some((subitem) => props.selectedItem === subitem.value) ? "hawa-bg-primary/80 hawa-text-primary-foreground hover:hawa-bg-primary/80" : ""
+        ),
+        showArrow: isOpen
       },
       /* @__PURE__ */ React11.createElement(
-        AccordionTrigger,
+        "div",
         {
           className: cn(
-            "hawa-w-full hawa-overflow-x-clip",
-            props.selectedItem === item.value ? "hawa-cursor-default hawa-bg-primary hawa-text-primary-foreground" : "hawa-h-10 hover:hawa-bg-primary/10",
-            item.subitems && item.subitems.some(
-              (subitem) => props.selectedItem === subitem.value
-            ) ? "hawa-bg-primary/80 hawa-text-primary-foreground hover:hawa-bg-primary/80" : ""
-          ),
-          showArrow: isOpen
+            "hawa-flex hawa-h-fit hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
+          )
         },
+        item.icon && item.icon,
         /* @__PURE__ */ React11.createElement(
-          "div",
+          "span",
           {
             className: cn(
-              "hawa-flex hawa-h-fit hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
+              "hawa-transition-all hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap",
+              isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
             )
           },
-          item.icon && item.icon,
-          /* @__PURE__ */ React11.createElement(
-            "span",
-            {
-              className: cn(
-                "hawa-transition-all hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap",
-                isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
-              )
-            },
-            item.label,
-            item.badge && /* @__PURE__ */ React11.createElement(
-              Chip,
-              {
-                label: item.badge.label,
-                color: item.badge.color,
-                size: "small"
-              }
-            )
-          )
+          item.label,
+          item.badge && /* @__PURE__ */ React11.createElement(Chip, { label: item.badge.label, color: item.badge.color, size: "small" })
         )
-      ),
-      item.subitems && /* @__PURE__ */ React11.createElement(AccordionContent, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React11.createElement(
-        "div",
+      )
+    ), item.subitems && /* @__PURE__ */ React11.createElement(AccordionContent, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
+        )
+      },
+      item.subitems.map((subitem, idx) => /* @__PURE__ */ React11.createElement(
+        LinkComponent,
         {
-          className: cn(
-            "hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
-          )
-        },
-        item.subitems.map((subitem, idx) => /* @__PURE__ */ React11.createElement(
-          LinkComponent,
-          {
-            href: subitem.slug,
-            key: idx,
-            onMouseDown: (e) => {
-              if (subitem.onMouseDown) {
-                subitem.onMouseDown(e);
-              }
-            },
-            onClick: (e) => {
-              e.stopPropagation();
-              if (subitem.onClick) {
-                subitem.onClick(e);
-              }
-              if (onSubItemClick) {
-                onSubItemClick([item.value, subitem.value]);
-              }
-            },
-            className: cn(
-              "hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-overflow-x-clip hawa-whitespace-nowrap hawa-rounded hawa-p-2 hawa-transition-all",
-              // bg-foreground/10
-              getSelectedStyle(subitem.value)
-            )
+          href: subitem.slug,
+          key: idx,
+          onMouseDown: (e) => {
+            if (subitem.onMouseDown) {
+              subitem.onMouseDown(e);
+            }
           },
-          subitem.icon && subitem.icon,
-          subitem.label,
-          subitem.badge && /* @__PURE__ */ React11.createElement(
-            Chip,
-            {
-              label: subitem.badge.label,
-              color: subitem.badge.color,
-              size: "small"
+          onClick: (e) => {
+            e.stopPropagation();
+            if (subitem.onClick) {
+              subitem.onClick(e);
             }
+            if (onSubItemClick) {
+              onSubItemClick([item.value, subitem.value]);
+            }
+          },
+          className: cn(
+            "hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-overflow-x-clip hawa-whitespace-nowrap hawa-rounded hawa-p-2 hawa-transition-all",
+            // bg-foreground/10
+            getSelectedStyle(subitem.value)
           )
-        ))
+        },
+        subitem.icon && subitem.icon,
+        subitem.label,
+        subitem.badge && /* @__PURE__ */ React11.createElement(Chip, { label: subitem.badge.label, color: subitem.badge.color, size: "small" })
       ))
-    );
+    )));
   } else {
     return /* @__PURE__ */ React11.createElement(
       LinkComponent,
@@ -1202,11 +1068,7 @@ var SidebarItem = ({
             onItemClick([item.value]);
           }
         },
-        className: cn(
-          triggerStyles,
-          getSelectedStyle(item.value),
-          "hawa-overflow-x-clip"
-        )
+        className: cn(triggerStyles, getSelectedStyle(item.value), "hawa-overflow-x-clip")
       },
       /* @__PURE__ */ React11.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React11.createElement(
         "span",
@@ -1218,14 +1080,7 @@ var SidebarItem = ({
         },
         item.label,
         " ",
-        item.badge && /* @__PURE__ */ React11.createElement(
-          Chip,
-          {
-            label: item.badge.label,
-            color: item.badge.color,
-            size: "small"
-          }
-        )
+        item.badge && /* @__PURE__ */ React11.createElement(Chip, { label: item.badge.label, color: item.badge.color, size: "small" })
       ))
     );
   }
@@ -1235,7 +1090,9 @@ var SidebarItem = ({
 var LOCAL_STORAGE_KEY = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
+  userInfoPosition = "next_to_avatar",
   DrawerFooterActions,
+  profileMenuItems,
   classNames,
   bordered = true,
   design = "default",
@@ -1268,9 +1125,7 @@ var AppLayout = ({
   };
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = useState2("");
-  const [size, setSize] = useState2(
-    typeof window !== "undefined" && window.innerWidth || 1200
-  );
+  const [size, setSize] = useState2(typeof window !== "undefined" && window.innerWidth || 1200);
   const [openSideMenu, setOpenSideMenu] = useState2(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedState ? JSON.parse(savedState) : false;
@@ -1325,6 +1180,18 @@ var AppLayout = ({
     }
   }, [size, keepDrawerOpen]);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
+  let finalProfileMenuItems = profileMenuItems;
+  if (userInfoPosition === "in_dropdown") {
+    if (profileMenuItems && profileMenuItems.length > 0) {
+      finalProfileMenuItems = [
+        {
+          content: /* @__PURE__ */ React12.createElement("div", { className: "hawa-text-end hawa-p-2 hawa-text-xs hawa-flex hawa-flex-col hawa-justify-center hawa-items-start" }, /* @__PURE__ */ React12.createElement("div", { className: "hawa-font-bold" }, props.username), /* @__PURE__ */ React12.createElement("div", null, props.email)),
+          itemType: "custom"
+        },
+        ...profileMenuItems
+      ];
+    }
+  }
   return /* @__PURE__ */ React12.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ React12.createElement(
     "div",
     {
@@ -1337,10 +1204,7 @@ var AppLayout = ({
     size > 600 ? /* @__PURE__ */ React12.createElement(
       "div",
       {
-        className: cn(
-          "dark:hawa-text-white",
-          size > 600 ? "hawa-ms-14" : "hawa-ms-2"
-        ),
+        className: cn("dark:hawa-text-white", size > 600 ? "hawa-ms-14" : "hawa-ms-2"),
         style: {
           marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
         }
@@ -1365,7 +1229,7 @@ var AppLayout = ({
         props.pageTitle ? /* @__PURE__ */ React12.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ React12.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React12.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ React12.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ React12.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ React12.createElement("div", null, props.email)) : null, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 && userInfoPosition === "next_to_avatar" ? /* @__PURE__ */ React12.createElement("div", { className: "hawa-text-end hawa-text-xs hawa-flex hawa-flex-col hawa-justify-center" }, /* @__PURE__ */ React12.createElement("div", { className: "hawa-font-bold" }, props.username), /* @__PURE__ */ React12.createElement("div", null, props.email)) : null, /* @__PURE__ */ React12.createElement(
       DropdownMenu,
       {
         LinkComponent: MenuLinkComponent,
@@ -1375,7 +1239,7 @@ var AppLayout = ({
         sideOffset: 10,
         width: profileMenuWidth,
         direction,
-        items: props.profileMenuItems || [],
+        items: finalProfileMenuItems || [],
         onItemSelect: (e) => console.log("selecting item ", e),
         trigger: /* @__PURE__ */ React12.createElement(
           "div",
@@ -1526,10 +1390,7 @@ var AppLayout = ({
             size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
-              localStorage.setItem(
-                LOCAL_STORAGE_KEY,
-                JSON.stringify(newKeepOpenState)
-              );
+              localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newKeepOpenState));
               setKeepDrawerOpen(newKeepOpenState);
             }
           },
@@ -1555,14 +1416,7 @@ var AppLayout = ({
         )
       ) : null
     )
-  )), /* @__PURE__ */ React12.createElement(
-    Dialog.Root,
-    {
-      open: size < 600 && openSideMenu,
-      onOpenChange: setOpenSideMenu
-    },
-    /* @__PURE__ */ React12.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React12.createElement(Dialog.Overlay, { className: "hawa-fixed hawa-inset-0 hawa-bg-foreground/20 hawa-backdrop-blur-[2px] data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10 data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))
-  ), /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React12.createElement(Dialog.Root, { open: size < 600 && openSideMenu, onOpenChange: setOpenSideMenu }, /* @__PURE__ */ React12.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React12.createElement(Dialog.Overlay, { className: "hawa-fixed hawa-inset-0 hawa-bg-foreground/20 hawa-backdrop-blur-[2px] data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10 data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))), /* @__PURE__ */ React12.createElement(
     "div",
     {
       className: "hawa-fixed hawa-overflow-y-auto hawa-transition-all hawa-z-0",