@almadar/ui 4.53.5 → 4.53.7

package/dist/avl/index.cjs

@@ -13173,17 +13173,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -13191,6 +13210,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -13201,12 +13221,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = React96.useState(false);
       const [triggerRect, setTriggerRect] = React96.useState(null);
+      const [popoverWidth, setPopoverWidth] = React96.useState(0);
       const triggerRef = React96.useRef(null);
       const popoverRef = React96.useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -13225,8 +13249,18 @@ var init_Popover = __esm({
       React96.useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      React96.useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       React96.useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -13265,10 +13299,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/avl/index.js

@@ -13127,17 +13127,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -13145,6 +13164,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -13155,12 +13175,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = useState(false);
       const [triggerRect, setTriggerRect] = useState(null);
+      const [popoverWidth, setPopoverWidth] = useState(0);
       const triggerRef = useRef(null);
       const popoverRef = useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -13179,8 +13203,18 @@ var init_Popover = __esm({
       useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -13219,10 +13253,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/components/index.cjs

@@ -7230,17 +7230,36 @@ var init_Tooltip = __esm({
     exports.Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2; exports.Popover = void 0;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING; exports.Popover = void 0;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -7248,6 +7267,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     exports.Popover = ({
       content,
       children,
@@ -7258,12 +7278,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = React78.useState(false);
       const [triggerRect, setTriggerRect] = React78.useState(null);
+      const [popoverWidth, setPopoverWidth] = React78.useState(0);
       const triggerRef = React78.useRef(null);
       const popoverRef = React78.useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -7282,8 +7306,18 @@ var init_Popover = __esm({
       React78.useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      React78.useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       React78.useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -7322,10 +7356,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/components/index.js

@@ -7184,17 +7184,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -7202,6 +7221,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -7212,12 +7232,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = useState(false);
       const [triggerRect, setTriggerRect] = useState(null);
+      const [popoverWidth, setPopoverWidth] = useState(0);
       const triggerRef = useRef(null);
       const popoverRef = useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -7236,8 +7260,18 @@ var init_Popover = __esm({
       useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -7276,10 +7310,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/providers/index.cjs

@@ -8798,17 +8798,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -8816,6 +8835,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -8826,12 +8846,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = React84.useState(false);
       const [triggerRect, setTriggerRect] = React84.useState(null);
+      const [popoverWidth, setPopoverWidth] = React84.useState(0);
       const triggerRef = React84.useRef(null);
       const popoverRef = React84.useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -8850,8 +8874,18 @@ var init_Popover = __esm({
       React84.useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      React84.useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       React84.useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -8890,10 +8924,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/providers/index.js

@@ -8752,17 +8752,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -8770,6 +8789,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -8780,12 +8800,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = useState(false);
       const [triggerRect, setTriggerRect] = useState(null);
+      const [popoverWidth, setPopoverWidth] = useState(0);
       const triggerRef = useRef(null);
       const popoverRef = useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -8804,8 +8828,18 @@ var init_Popover = __esm({
       useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -8844,10 +8878,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/runtime/index.cjs

@@ -8686,17 +8686,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -8704,6 +8723,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -8714,12 +8734,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = React83.useState(false);
       const [triggerRect, setTriggerRect] = React83.useState(null);
+      const [popoverWidth, setPopoverWidth] = React83.useState(0);
       const triggerRef = React83.useRef(null);
       const popoverRef = React83.useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -8738,8 +8762,18 @@ var init_Popover = __esm({
       React83.useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      React83.useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       React83.useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -8778,10 +8812,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/dist/runtime/index.js

@@ -8640,17 +8640,36 @@ var init_Tooltip = __esm({
     Tooltip.displayName = "Tooltip";
   }
 });
-var positionClasses2, arrowClasses2, Popover;
+function computePopoverStyle(position, triggerRect, popoverWidth) {
+  if (position === "left" || position === "right") {
+    return {
+      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
+      top: triggerRect.top + triggerRect.height / 2
+    };
+  }
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const centered = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+  const maxLeft = viewportWidth - popoverWidth - VIEWPORT_EDGE_PADDING;
+  const clamped = Math.max(
+    VIEWPORT_EDGE_PADDING,
+    Math.min(centered, Math.max(VIEWPORT_EDGE_PADDING, maxLeft))
+  );
+  return {
+    left: clamped,
+    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+  };
+}
+var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
 var init_Popover = __esm({
   "components/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
     positionClasses2 = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+      top: "mb-2",
+      bottom: "mt-2",
+      left: "mr-2 -translate-y-1/2",
+      right: "ml-2 -translate-y-1/2"
     };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
@@ -8658,6 +8677,7 @@ var init_Popover = __esm({
       left: "left-full top-1/2 -translate-y-1/2 border-l-white border-t-transparent border-b-transparent border-r-transparent",
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
+    VIEWPORT_EDGE_PADDING = 8;
     Popover = ({
       content,
       children,
@@ -8668,12 +8688,16 @@ var init_Popover = __esm({
     }) => {
       const [isOpen, setIsOpen] = useState(false);
       const [triggerRect, setTriggerRect] = useState(null);
+      const [popoverWidth, setPopoverWidth] = useState(0);
       const triggerRef = useRef(null);
       const popoverRef = useRef(null);
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
         }
+        if (popoverRef.current) {
+          setPopoverWidth(popoverRef.current.offsetWidth);
+        }
       };
       const handleOpen = () => {
         updatePosition();
@@ -8692,8 +8716,18 @@ var init_Popover = __esm({
       useEffect(() => {
         if (isOpen) {
           updatePosition();
+        } else {
+          setPopoverWidth(0);
         }
       }, [isOpen]);
+      useLayoutEffect(() => {
+        if (isOpen && popoverRef.current) {
+          const measured = popoverRef.current.offsetWidth;
+          if (measured !== popoverWidth) {
+            setPopoverWidth(measured);
+          }
+        }
+      });
       useEffect(() => {
         if (trigger !== "click") {
           return;
@@ -8732,10 +8766,7 @@ var init_Popover = __esm({
               positionClasses2[position],
               className
             ),
-            style: {
-              left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-              top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2
-            },
+            style: computePopoverStyle(position, triggerRect, popoverWidth),
             role: "dialog",
             onMouseEnter: trigger === "hover" ? handleOpen : void 0,
             onMouseLeave: trigger === "hover" ? handleClose : void 0,

package/package.json

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