@moving-walls/design-system 1.0.20 → 1.0.22

package/dist/index.js

@@ -36318,10 +36318,22 @@ var defaultPresets$1 = [{
 function formatDate(date) {
   var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'MM/dd/yyyy';
   if (!date) return '';
+  var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
   var month = String(date.getMonth() + 1).padStart(2, '0');
+  var monthShort = monthNames[date.getMonth()];
   var day = String(date.getDate()).padStart(2, '0');
   var year = date.getFullYear();
-  return format.replace('MM', month).replace('dd', day).replace('yyyy', String(year));
+  // Use placeholders to avoid substring conflicts (MMM contains MM, yyyy contains yy)
+  var result = format;
+  result = result.replace('MMM', '\x01');
+  result = result.replace('MM', '\x02');
+  result = result.replace('dd', '\x03');
+  result = result.replace('yyyy', '\x04');
+  result = result.replace('\x01', monthShort);
+  result = result.replace('\x02', month);
+  result = result.replace('\x03', day);
+  result = result.replace('\x04', String(year));
+  return result;
 }
 function isSameDay(date1, date2) {
   if (!date1 || !date2) return false;
@@ -36348,7 +36360,7 @@ function CalendarMonth(_ref) {
   var weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
   var firstDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
   var lastDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
-  var firstDayOfWeek = firstDayOfMonth.getDay();
+  var firstDayOfWeek = (firstDayOfMonth.getDay() + 6) % 7; // Convert to Monday-start (Mon=0, Sun=6)
   var daysInMonth = lastDayOfMonth.getDate();
   var days = [];
   // Previous month's trailing days
@@ -41304,9 +41316,7 @@ Table.Row = TableRow;
 Table.Head = TableHead;
 Table.Cell = TableCell;
 
-var TooltipContext = /*#__PURE__*/React.createContext({
-  delayDuration: 0
-});
+var PADDING = 8;
 function Tooltip(_ref2) {
   var content = _ref2.content,
     children = _ref2.children,
@@ -41317,42 +41327,126 @@ function Tooltip(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
-  var _useContext = React.useContext(TooltipContext);
-    _useContext.delayDuration;
-  var positionClasses = {
-    top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
-    bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
-    left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
-    right: 'left-full top-1/2 transform -translate-y-1/2 ml-2'
+  var triggerRef = React.useRef(null);
+  var tooltipRef = React.useRef(null);
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    coords = _useState4[0],
+    setCoords = _useState4[1];
+  var _useState5 = React.useState(position),
+    _useState6 = _slicedToArray(_useState5, 2),
+    resolvedPosition = _useState6[0],
+    setResolvedPosition = _useState6[1];
+  React.useLayoutEffect(function () {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) return;
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    var tooltipRect = tooltipRef.current.getBoundingClientRect();
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    var top = 0;
+    var left = 0;
+    var resolved = position;
+    // Calculate preferred position
+    var calc = function calc(pos) {
+      switch (pos) {
+        case 'top':
+          top = triggerRect.top - tooltipRect.height - PADDING;
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case 'bottom':
+          top = triggerRect.bottom + PADDING;
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case 'left':
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.left - tooltipRect.width - PADDING;
+          break;
+        case 'right':
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.right + PADDING;
+          break;
+      }
+    };
+    calc(position);
+    // Flip if overflowing viewport
+    if (position === 'top' && top < PADDING) {
+      resolved = 'bottom';
+      calc('bottom');
+    } else if (position === 'bottom' && top + tooltipRect.height > vh - PADDING) {
+      resolved = 'top';
+      calc('top');
+    } else if (position === 'left' && left < PADDING) {
+      resolved = 'right';
+      calc('right');
+    } else if (position === 'right' && left + tooltipRect.width > vw - PADDING) {
+      resolved = 'left';
+      calc('left');
+    }
+    // Clamp horizontal to stay within viewport
+    if (left < PADDING) left = PADDING;
+    if (left + tooltipRect.width > vw - PADDING) left = vw - PADDING - tooltipRect.width;
+    // Clamp vertical
+    if (top < PADDING) top = PADDING;
+    if (top + tooltipRect.height > vh - PADDING) top = vh - PADDING - tooltipRect.height;
+    setCoords({
+      top: top,
+      left: left
+    });
+    setResolvedPosition(resolved);
+  }, [isVisible, position]);
+  var show = React.useCallback(function () {
+    return setIsVisible(true);
+  }, []);
+  var hide = React.useCallback(function () {
+    setIsVisible(false);
+    setCoords(null);
+  }, []);
+  // Arrow positioning relative to tooltip
+  var arrowStyle = function arrowStyle() {
+    if (!triggerRef.current || !tooltipRef.current || !coords) return {};
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    var tooltipRect = tooltipRef.current.getBoundingClientRect();
+    if (resolvedPosition === 'top' || resolvedPosition === 'bottom') {
+      var arrowLeft = triggerRect.left + triggerRect.width / 2 - coords.left - 4;
+      return {
+        left: Math.max(8, Math.min(arrowLeft, tooltipRect.width - 8))
+      };
+    }
+    var arrowTop = triggerRect.top + triggerRect.height / 2 - coords.top - 4;
+    return {
+      top: Math.max(8, Math.min(arrowTop, tooltipRect.height - 8))
+    };
   };
   var arrowClasses = {
-    top: 'top-full left-1/2 transform -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-white',
-    bottom: 'bottom-full left-1/2 transform -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-white',
-    left: 'left-full top-1/2 transform -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-white',
-    right: 'right-full top-1/2 transform -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-white'
+    top: 'absolute top-full border-l-transparent border-r-transparent border-b-transparent border-t-white',
+    bottom: 'absolute bottom-full border-l-transparent border-r-transparent border-t-transparent border-b-white',
+    left: 'absolute left-full border-t-transparent border-b-transparent border-r-transparent border-l-white',
+    right: 'absolute right-full border-t-transparent border-b-transparent border-l-transparent border-r-white'
   };
   return require$$1.jsxs("div", {
     className: "relative inline-block",
+    ref: triggerRef,
     children: [require$$1.jsx("div", {
-      onMouseEnter: function onMouseEnter() {
-        return setIsVisible(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsVisible(false);
-      },
-      onFocus: function onFocus() {
-        return setIsVisible(true);
-      },
-      onBlur: function onBlur() {
-        return setIsVisible(false);
-      },
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
       children: children
-    }), isVisible && require$$1.jsxs("div", {
-      className: clsx('absolute z-50 px-2 py-1 text-sm text-mw-neutral-500 bg-white border border-mw-neutral-100 rounded-md whitespace-nowrap shadow-sm', positionClasses[position], className),
+    }), isVisible && /*#__PURE__*/ReactDOM.createPortal(require$$1.jsxs("div", {
+      ref: tooltipRef,
+      style: coords ? {
+        top: coords.top,
+        left: coords.left
+      } : {
+        top: -9999,
+        left: -9999
+      },
+      className: clsx('fixed z-[9999] px-2 py-1 text-sm text-mw-neutral-500 bg-white border border-mw-neutral-100 rounded-md shadow-sm max-w-xs whitespace-normal', className),
       children: [content, require$$1.jsx("div", {
-        className: clsx('absolute w-0 h-0 border-4', arrowClasses[position])
+        className: clsx('w-0 h-0 border-4', arrowClasses[resolvedPosition]),
+        style: arrowStyle()
       })]
-    })]
+    }), document.body)]
   });
 }