@almadar/ui 4.53.4 → 4.53.6

package/dist/avl/index.cjs

@@ -12713,11 +12713,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -26078,11 +26109,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });
@@ -60440,7 +60471,7 @@ var OrbPreviewNodeInner = (props) => {
     Box,
     {
       ref: isExpanded ? void 0 : l1SetNodeRef,
-      className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
+      className: `@container/preview rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
         borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
         borderWidth: l1IsOver ? "2px" : borderWidth,

package/dist/avl/index.js

@@ -12667,11 +12667,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -26032,11 +26063,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });
@@ -60394,7 +60425,7 @@ var OrbPreviewNodeInner = (props) => {
     Box,
     {
       ref: isExpanded ? void 0 : l1SetNodeRef,
-      className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
+      className: `@container/preview rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
         borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
         borderWidth: l1IsOver ? "2px" : borderWidth,

package/dist/components/index.cjs

@@ -6770,11 +6770,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     exports.SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -21245,11 +21276,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/dist/components/index.js

@@ -6724,11 +6724,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -21199,11 +21230,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/dist/marketing/index.cjs

@@ -3900,11 +3900,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
 };
 var SimpleGrid = ({
   minChildWidth = 250,

package/dist/marketing/index.js

@@ -3876,11 +3876,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
 };
 var SimpleGrid = ({
   minChildWidth = 250,

package/dist/providers/index.cjs

@@ -8338,11 +8338,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -22490,11 +22521,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/dist/providers/index.js

@@ -8292,11 +8292,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -22444,11 +22475,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/dist/runtime/index.cjs

@@ -8226,11 +8226,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -22259,11 +22290,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/dist/runtime/index.js

@@ -8180,11 +8180,11 @@ var init_SimpleGrid = __esm({
     };
     colStyles = {
       1: "grid-cols-1",
-      2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+      2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 @max-xl:!grid-cols-4 @max-lg:!grid-cols-3 @max-md:!grid-cols-2 @max-sm:!grid-cols-1"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -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,
@@ -22213,11 +22244,11 @@ function DataGrid({
   const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
   const colsClass = cols ? {
     1: "grid-cols-1",
-    2: "sm:grid-cols-2",
-    3: "sm:grid-cols-2 lg:grid-cols-3",
-    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+    2: "sm:grid-cols-2 @max-sm:!grid-cols-1",
+    3: "sm:grid-cols-2 lg:grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 @max-xl:!grid-cols-3 @max-lg:!grid-cols-2 @max-sm:!grid-cols-1"
   }[cols] : void 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });

package/package.json

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