@sikka/hawa 0.36.1-next → 0.37.0-next

package/dist/layout/index.d.mts

@@ -141,8 +141,6 @@ type AppLayoutTypes$1 = {
      * - 'parent': Inherits width from parent element.
      */
     profileMenuWidth?: "default" | "sm" | "lg" | "parent";
-    /** Event handler for drawer expansion. */
-    onDrawerExpand?: (e: any) => void;
     /** Specifies additional actions for the drawer footer. */
     DrawerFooterActions?: any;
     /** Specifies the item that was clicked. */

package/dist/layout/index.d.ts

@@ -141,8 +141,6 @@ type AppLayoutTypes$1 = {
      * - 'parent': Inherits width from parent element.
      */
     profileMenuWidth?: "default" | "sm" | "lg" | "parent";
-    /** Event handler for drawer expansion. */
-    onDrawerExpand?: (e: any) => void;
     /** Specifies additional actions for the drawer footer. */
     DrawerFooterActions?: any;
     /** Specifies the item that was clicked. */

package/dist/layout/index.js

@@ -686,6 +686,9 @@ function useClickOutside(handler, events, nodes) {
   return ref;
 }
 
+// layout/appLayout/AppLayout.tsx
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+
 // elements/button/Button.tsx
 var React12 = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -1534,7 +1537,7 @@ var AppLayout = ({
   ...props
 }) => {
   var _a, _b;
-  (0, import_react14.useLayoutEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY);
     if (isDrawerOpen === null) {
       localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
@@ -1559,6 +1562,7 @@ var AppLayout = ({
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedState ? JSON.parse(savedState) : false;
   });
+  const [container, setContainer] = import_react14.default.useState(null);
   const [keepDrawerOpen, setKeepDrawerOpen] = (0, import_react14.useState)(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedState ? JSON.parse(savedState) : false;
@@ -1578,6 +1582,8 @@ var AppLayout = ({
         setSize(window.innerWidth);
         if (window.innerWidth > 600) {
           setKeepDrawerOpen(false);
+        } else {
+          localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
         }
       };
       resize();
@@ -1607,7 +1613,7 @@ var AppLayout = ({
     {
       dir: direction,
       className: cn(
-        "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",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 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]"
       )
     },
@@ -1635,7 +1641,7 @@ var AppLayout = ({
           "div",
           {
             onClick: () => setOpenSideMenu(true),
-            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer  hawa-rounded hawa-p-2  hawa-transition-all hover:hawa-bg-gray-100"
+            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2  hawa-transition-all "
           },
           /* @__PURE__ */ import_react14.default.createElement(MenuIcon, null)
         ),
@@ -1680,13 +1686,13 @@ var AppLayout = ({
         )
       }
     ))
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement("div", { ref: setContainer }, /* @__PURE__ */ import_react14.default.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-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-40 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]" : ""
+        bordered ? size > 600 ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : "" : ""
       ),
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
@@ -1826,10 +1832,17 @@ var AppLayout = ({
         )
       ) : null
     )
+  )), /* @__PURE__ */ import_react14.default.createElement(
+    Dialog.Root,
+    {
+      open: size < 600 && openSideMenu,
+      onOpenChange: setOpenSideMenu
+    },
+    /* @__PURE__ */ import_react14.default.createElement(Dialog.Portal, { container }, /* @__PURE__ */ import_react14.default.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__ */ import_react14.default.createElement(
     "div",
     {
-      className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
+      className: "hawa-fixed hawa-overflow-y-auto  hawa-transition-all hawa-z-0",
       style: isRTL ? {
         left: "0px",
         top: props.topBar ? "56px" : "0px",

package/dist/layout/index.mjs

@@ -394,7 +394,8 @@ var Navbar = ({
 };
 
 // layout/appLayout/AppLayout.tsx
-import React5, { useEffect, useLayoutEffect, useState as useState2 } from "react";
+import React5, { useEffect, useState as useState2 } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
 var LOCAL_STORAGE_KEY = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
@@ -412,7 +413,7 @@ var AppLayout = ({
   ...props
 }) => {
   var _a, _b;
-  useLayoutEffect(() => {
+  useEffect(() => {
     let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY);
     if (isDrawerOpen === null) {
       localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
@@ -437,6 +438,7 @@ var AppLayout = ({
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedState ? JSON.parse(savedState) : false;
   });
+  const [container, setContainer] = React5.useState(null);
   const [keepDrawerOpen, setKeepDrawerOpen] = useState2(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedState ? JSON.parse(savedState) : false;
@@ -456,6 +458,8 @@ var AppLayout = ({
         setSize(window.innerWidth);
         if (window.innerWidth > 600) {
           setKeepDrawerOpen(false);
+        } else {
+          localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
         }
       };
       resize();
@@ -485,7 +489,7 @@ var AppLayout = ({
     {
       dir: direction,
       className: cn(
-        "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",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 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]"
       )
     },
@@ -513,7 +517,7 @@ var AppLayout = ({
           "div",
           {
             onClick: () => setOpenSideMenu(true),
-            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer  hawa-rounded hawa-p-2  hawa-transition-all hover:hawa-bg-gray-100"
+            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2  hawa-transition-all "
           },
           /* @__PURE__ */ React5.createElement(MenuIcon, null)
         ),
@@ -558,13 +562,13 @@ var AppLayout = ({
         )
       }
     ))
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React5.createElement("div", { ref: setContainer }, /* @__PURE__ */ React5.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-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-40 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]" : ""
+        bordered ? size > 600 ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : "" : ""
       ),
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
@@ -704,10 +708,17 @@ var AppLayout = ({
         )
       ) : null
     )
+  )), /* @__PURE__ */ React5.createElement(
+    Dialog.Root,
+    {
+      open: size < 600 && openSideMenu,
+      onOpenChange: setOpenSideMenu
+    },
+    /* @__PURE__ */ React5.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React5.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__ */ React5.createElement(
     "div",
     {
-      className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
+      className: "hawa-fixed hawa-overflow-y-auto  hawa-transition-all hawa-z-0",
       style: isRTL ? {
         left: "0px",
         top: props.topBar ? "56px" : "0px",

package/dist/phoneInput/index.js

@@ -1954,6 +1954,10 @@ var Select = ({
       children
     );
   };
+  let phoneCodeStyles = "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px]";
+  let selectContainerStyles = "hawa-rounded hawa-block hawa-w-full hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm";
+  let selectPlaceholderStyles = "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1";
+  let selectIndicatorContainerStyles = "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ";
   return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
@@ -1975,26 +1979,22 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded ",
-              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
-              "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
+              selectContainerStyles,
+              props.phoneCode && phoneCodeStyles,
               props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
               props.isMulti && "hawa-ps-0 "
             ),
-            placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
+            placeholder: () => selectPlaceholderStyles,
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
+              selectIndicatorContainerStyles,
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
-          components: props.hideIndicator ? {
-            Option,
-            Menu,
-            IndicatorsContainer: () => null
-          } : {
+          autoFocus: false,
+          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
             Option,
             Menu,
             // Control: (e) => (
@@ -2016,10 +2016,7 @@ var Select = ({
             MultiValueContainer: (e) => /* @__PURE__ */ import_react3.default.createElement(
               "div",
               {
-                className: cn(
-                  // e.className,
-                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
-                ),
+                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
                 ...e
               }
             )