@almadar/ui 5.21.11 → 5.21.12

package/dist/avl/index.cjs

@@ -13675,7 +13675,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = hooks.useTranslate();
+      const { t, direction } = hooks.useTranslate();
       const [isOpen, setIsOpen] = React97.useState(false);
       const [activeSubMenu, setActiveSubMenu] = React97.useState(null);
       const [triggerRect, setTriggerRect] = React97.useState(null);
@@ -13729,6 +13729,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React97__namespace.default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React97__namespace.default.cloneElement(
         triggerChild,
@@ -13756,7 +13768,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -13775,7 +13787,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -13795,7 +13807,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -13813,12 +13826,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/avl/index.js

@@ -13626,7 +13626,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = useTranslate();
+      const { t, direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
@@ -13680,6 +13680,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React97__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React97__default.cloneElement(
         triggerChild,
@@ -13707,7 +13719,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -13726,7 +13738,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -13746,7 +13758,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -13764,12 +13777,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/components/index.cjs

@@ -8124,7 +8124,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = hooks.useTranslate();
+      const { t, direction } = hooks.useTranslate();
       const [isOpen, setIsOpen] = React79.useState(false);
       const [activeSubMenu, setActiveSubMenu] = React79.useState(null);
       const [triggerRect, setTriggerRect] = React79.useState(null);
@@ -8178,6 +8178,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React79__namespace.default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React79__namespace.default.cloneElement(
         triggerChild,
@@ -8205,7 +8217,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -8224,7 +8236,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -8244,7 +8256,8 @@ var init_Menu = __esm({
               exports.Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -8262,12 +8275,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/components/index.js

@@ -8076,7 +8076,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = useTranslate();
+      const { t, direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
@@ -8130,6 +8130,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React79__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React79__default.cloneElement(
         triggerChild,
@@ -8157,7 +8169,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -8176,7 +8188,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -8196,7 +8208,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -8214,12 +8227,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/providers/index.cjs

@@ -9703,7 +9703,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = hooks.useTranslate();
+      const { t, direction } = hooks.useTranslate();
       const [isOpen, setIsOpen] = React85.useState(false);
       const [activeSubMenu, setActiveSubMenu] = React85.useState(null);
       const [triggerRect, setTriggerRect] = React85.useState(null);
@@ -9757,6 +9757,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React85__namespace.default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React85__namespace.default.cloneElement(
         triggerChild,
@@ -9784,7 +9796,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -9803,7 +9815,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -9823,7 +9835,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -9841,12 +9854,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/providers/index.js

@@ -9654,7 +9654,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = useTranslate();
+      const { t, direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
@@ -9708,6 +9708,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React85__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React85__default.cloneElement(
         triggerChild,
@@ -9735,7 +9747,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -9754,7 +9766,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -9774,7 +9786,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -9792,12 +9805,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/runtime/index.cjs

@@ -9258,7 +9258,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = hooks.useTranslate();
+      const { t, direction } = hooks.useTranslate();
       const [isOpen, setIsOpen] = React84.useState(false);
       const [activeSubMenu, setActiveSubMenu] = React84.useState(null);
       const [triggerRect, setTriggerRect] = React84.useState(null);
@@ -9312,6 +9312,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React84__namespace.default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React84__namespace.default.cloneElement(
         triggerChild,
@@ -9339,7 +9351,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -9358,7 +9370,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -9378,7 +9390,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -9396,12 +9409,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/dist/runtime/index.js

@@ -9209,7 +9209,7 @@ var init_Menu = __esm({
       className
     }) => {
       const eventBus = useEventBus();
-      const { t } = useTranslate();
+      const { t, direction } = useTranslate();
       const [isOpen, setIsOpen] = useState(false);
       const [activeSubMenu, setActiveSubMenu] = useState(null);
       const [triggerRect, setTriggerRect] = useState(null);
@@ -9263,6 +9263,18 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
+      const rtlMirror = {
+        "top-left": "top-right",
+        "top-right": "top-left",
+        "bottom-left": "bottom-right",
+        "bottom-right": "bottom-left",
+        "top-start": "top-end",
+        "top-end": "top-start",
+        "bottom-start": "bottom-end",
+        "bottom-end": "bottom-start"
+      };
+      const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
+      const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
       const triggerChild = React84__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
       const triggerElement = React84__default.cloneElement(
         triggerChild,
@@ -9290,7 +9302,7 @@ var init_Menu = __esm({
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
-              "w-full flex items-center justify-between gap-3 px-4 py-2 text-left",
+              "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
               "text-sm transition-colors",
               "hover:bg-muted",
               "focus:outline-none focus:bg-muted",
@@ -9309,7 +9321,7 @@ var init_Menu = __esm({
                 }
               ),
               item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge }),
-              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm", className: "flex-shrink-0" })
+              hasSubMenu && /* @__PURE__ */ jsx(Icon, { name: direction === "rtl" ? "chevron-left" : "chevron-right", size: "sm", className: "flex-shrink-0" })
             ] })
           },
           itemId
@@ -9329,7 +9341,8 @@ var init_Menu = __esm({
               Box,
               {
                 className: cn(
-                  "absolute left-full top-0 ml-2 z-50",
+                  "absolute top-0 z-50",
+                  subMenuSideClass,
                   menuContainerStyles
                 ),
                 children: renderMenuItems(item.subMenu)
@@ -9347,12 +9360,12 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[position],
+              positionClasses3[effectivePosition],
               className
             ),
             style: {
-              left: position.includes("left") ? 0 : "auto",
-              right: position.includes("right") ? 0 : "auto"
+              left: effectivePosition.includes("left") ? 0 : "auto",
+              right: effectivePosition.includes("right") ? 0 : "auto"
             },
             role: "menu",
             children: renderMenuItems(items)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.21.11",
+  "version": "5.21.12",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [