@sikka/hawa 0.34.1-next → 0.34.3-next

package/dist/appLayout/index.mjs

@@ -1176,12 +1176,12 @@ var AppLayout = ({
       setOpenSideMenu(false);
     }
   }, [size]);
-  return /* @__PURE__ */ React9.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ React9.createElement(
     "div",
     {
+      dir: direction,
       className: cn(
-        "hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
-        isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -1190,18 +1190,10 @@ var AppLayout = ({
       {
         className: cn(
           "dark:hawa-text-white",
-          isRTL ? [
-            size > 600 ? "hawa-mr-14" : "hawa-mr-2",
-            keepDrawerOpen ? "hawa-mr-40" : ""
-          ] : [
-            size > 600 ? "hawa-ml-14" : "hawa-ml-2",
-            keepDrawerOpen ? "hawa-ml-40" : ""
-          ]
+          size > 600 ? "hawa-ms-14" : "hawa-ms-2"
         ),
-        style: isRTL ? {
-          marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
-        } : {
-          marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
+        style: {
+          marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
         }
       },
       props.pageTitle
@@ -1224,71 +1216,51 @@ var AppLayout = ({
         props.pageTitle ? /* @__PURE__ */ React9.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ React9.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React9.createElement(
-      "div",
+    /* @__PURE__ */ React9.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ React9.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ React9.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ React9.createElement("div", null, props.email)) : null, /* @__PURE__ */ React9.createElement(
+      DropdownMenu,
       {
-        className: cn(
-          "hawa-flex hawa-gap-2 dark:hawa-text-white",
-          isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
-        )
-      },
-      size > 600 ? /* @__PURE__ */ React9.createElement(
-        "div",
-        {
-          className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
-        },
-        /* @__PURE__ */ React9.createElement("div", { className: "hawa-font-bold" }, props.username),
-        " ",
-        /* @__PURE__ */ React9.createElement("div", null, props.email)
-      ) : null,
-      /* @__PURE__ */ React9.createElement(
-        DropdownMenu,
-        {
-          LinkComponent: MenuLinkComponent,
-          triggerClassname: "hawa-mx-2",
-          align: "end",
-          alignOffset: 8,
-          side: "bottom",
-          sideOffset: 5,
-          width: profileMenuWidth,
-          direction: isRTL ? "rtl" : "ltr",
-          items: props.profileMenuItems || [],
-          onItemSelect: (e) => console.log("selecting item ", e),
-          trigger: /* @__PURE__ */ React9.createElement(
-            "div",
+        LinkComponent: MenuLinkComponent,
+        triggerClassname: "hawa-mx-2",
+        align: "end",
+        alignOffset: 8,
+        side: "bottom",
+        sideOffset: 5,
+        width: profileMenuWidth,
+        direction,
+        items: props.profileMenuItems || [],
+        onItemSelect: (e) => console.log("selecting item ", e),
+        trigger: /* @__PURE__ */ React9.createElement(
+          "div",
+          {
+            onClick: onAvatarClick,
+            className: "hawa-relative hawa-h-8 hawa-w-8  hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
+          },
+          props.avatarImage ? /* @__PURE__ */ React9.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React9.createElement(
+            "svg",
             {
-              onClick: onAvatarClick,
-              className: "hawa-relative hawa-h-8 hawa-w-8  hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
+              "aria-label": "Avatar Icon",
+              className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
+              fill: "currentColor",
+              viewBox: "0 0 20 20"
             },
-            props.avatarImage ? /* @__PURE__ */ React9.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React9.createElement(
-              "svg",
+            /* @__PURE__ */ React9.createElement(
+              "path",
               {
-                "aria-label": "Avatar Icon",
-                className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
-                fill: "currentColor",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ React9.createElement(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
-                  clipRule: "evenodd"
-                }
-              )
+                fillRule: "evenodd",
+                d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+                clipRule: "evenodd"
+              }
             )
           )
-        }
-      )
-    )
+        )
+      }
+    ))
   ), /* @__PURE__ */ React9.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
-        isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
-        "hawa-h-[calc(100dvh)]",
-        "hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        isRTL ? "hawa-right-0" : "hawa-left-0",
         bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
       ),
       style: {
@@ -1330,7 +1302,7 @@ var AppLayout = ({
         "img",
         {
           className: cn(
-            "hawa-h-9  hawa-opacity-0 hawa-transition-all",
+            "hawa-h-9 hawa-opacity-0 hawa-transition-all",
             !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.fullLogoImg
           ),
@@ -1341,8 +1313,7 @@ var AppLayout = ({
         "img",
         {
           className: cn(
-            "hawa-fixed  hawa-h-9  hawa-transition-all",
-            isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
+            "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
             openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.symbolLogoImg
           ),
@@ -1401,21 +1372,21 @@ var AppLayout = ({
         {
           side: "left",
           delayDuration: 500,
-          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
-          triggerProps: { asChild: true }
+          triggerProps: { asChild: true },
+          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
         },
         /* @__PURE__ */ React9.createElement(
           Button,
           {
             variant: "outline",
+            size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
               setKeepDrawerOpen(newKeepOpenState);
-            },
-            size: "smallIcon"
+            }
           },
           /* @__PURE__ */ React9.createElement(
             "svg",
@@ -1444,15 +1415,15 @@ var AppLayout = ({
     {
       className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
       style: isRTL ? {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
-        width: `calc(100% - ${drawerSizeCondition}px)`,
         left: "0px",
-        top: props.topBar ? "56px" : "0px"
-      } : {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
+        top: props.topBar ? "56px" : "0px",
         width: `calc(100% - ${drawerSizeCondition}px)`,
+        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
+      } : {
         left: `${drawerSizeCondition}px`,
-        top: props.topBar ? "56px" : "0px"
+        top: props.topBar ? "56px" : "0px",
+        width: `calc(100% - ${drawerSizeCondition}px)`,
+        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
       }
     },
     props.children