@blerp/design 1.4.1 → 1.4.3

package/dist/cjs/neo-components/Autocomplete.js

@@ -22,10 +22,13 @@ const _excluded = ["options", "value", "defaultValue", "onChange", "onInputChang
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined';
 /**
  * Autocomplete - combo box with filtering
  */
 
+
 const AutocompleteBase = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     options = [],
@@ -174,6 +177,8 @@ const AutocompleteBase = /*#__PURE__*/React__default["default"].forwardRef((_ref
 
 
   React.useEffect(() => {
+    if (!canUseDOM()) return;
+
     const handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target) && listboxRef.current && !listboxRef.current.contains(event.target)) {
         handleClose();

package/dist/cjs/neo-components/Dialog.js

@@ -244,6 +244,11 @@ const BaseModal = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
 
   if (disablePortal) {
     return modalContent;
+  } // SSR check - don't use createPortal on the server
+
+
+  if (typeof window === 'undefined') {
+    return null;
   }
 
   return /*#__PURE__*/ReactDOM.createPortal(modalContent, container || document.body);

package/dist/cjs/neo-components/Input.js

@@ -50,6 +50,8 @@ const resolveStyles = (styleObj, colors) => {
 
   return resolved;
 };
+
+const canUseDOM = () => typeof window !== "undefined" && typeof document !== "undefined";
 /**
  * Input/TextField - Form input component (replaces MUI TextField)
  * Supports variants: outlined, filled, standard
@@ -340,7 +342,7 @@ const BaseInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   const handleClick = e => {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
 
-    if (!disabled) {
+    if (!disabled && canUseDOM()) {
       const input = document.getElementById(id);
       input === null || input === void 0 ? void 0 : input.focus();
     }

package/dist/cjs/neo-components/Layout.js

@@ -738,6 +738,7 @@ const AccordionSummary = /*#__PURE__*/React__default["default"].forwardRef((_ref
     style: iconStyle
   }, expandIcon));
 });
+AccordionSummary.displayName = "AccordionSummary";
 /**
  * AccordionDetails - Content area
  */

package/dist/cjs/neo-components/Misc.js

@@ -29,6 +29,11 @@ const _excluded = ["orientation", "variant", "flexItem", "light", "textAlign", "
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined'; // Use useLayoutEffect only on client, useEffect on server
+
+
+const useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
 /**
  * Divider - Visual separator (replaces MUI Divider)
  */
@@ -471,13 +476,18 @@ const BaseTooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref5, re
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = React.useState(false);
   const timeoutRef = React.useRef(null);
   const childRef = React.useRef(null);
   const tooltipRef = React.useRef(null);
-  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // Calculate position based on child element and placement
+  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // SSR safety - only mount portal after hydration
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []); // Calculate position based on child element and placement
 
   const updatePosition = React.useCallback(() => {
-    if (!childRef.current) return;
+    if (!canUseDOM() || !childRef.current) return;
     const childRect = childRef.current.getBoundingClientRect();
     const tooltipEl = tooltipRef.current;
     const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : {
@@ -577,17 +587,16 @@ const BaseTooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref5, re
     });
   }, [placement]); // Update position when open changes or on scroll/resize
 
-  React.useLayoutEffect(() => {
-    if (open) {
-      updatePosition(); // Update position on scroll and resize
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || !open) return;
+    updatePosition(); // Update position on scroll and resize
 
-      window.addEventListener('scroll', updatePosition, true);
-      window.addEventListener('resize', updatePosition);
-      return () => {
-        window.removeEventListener('scroll', updatePosition, true);
-        window.removeEventListener('resize', updatePosition);
-      };
-    }
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
   }, [open, updatePosition]); // Re-calculate after tooltip renders (to get accurate dimensions)
 
   React.useEffect(() => {
@@ -688,9 +697,10 @@ const BaseTooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref5, re
   }, (_componentsProps$tool3 = componentsProps.tooltip) === null || _componentsProps$tool3 === void 0 ? void 0 : _componentsProps$tool3.sx), PopperProps.sx), {}, {
     // Force background at the end to ensure it's never transparent
     backgroundColor
-  });
+  }); // Don't render portal during SSR or before mount
+
 
-  const tooltipContent = open && title ? /*#__PURE__*/React__default["default"].createElement("span", {
+  const tooltipContent = open && title && mounted && canUseDOM() ? /*#__PURE__*/React__default["default"].createElement("span", {
     ref: tooltipRef,
     role: "tooltip",
     style: tooltipStyle

package/dist/cjs/neo-components/Navigation.js

@@ -32,6 +32,11 @@ const _excluded = ["open", "onClose", "anchorEl", "anchorOrigin", "transformOrig
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined'; // Use useLayoutEffect only on client, useEffect on server
+
+
+const useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
 /**
  * Context to detect if we're inside a Popover
  */
@@ -106,6 +111,7 @@ function resolveStyleColors(style, colors) {
 
 
 function isClickInsideAnyOverlay(target, excludeElement) {
+  if (!canUseDOM()) return false;
   let element = target;
 
   while (element && element !== document.body) {
@@ -180,10 +186,15 @@ const BaseMenu = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = React.useState(false);
   const {
     registerOverlay,
     isClickInsideOverlay
-  } = useOverlayStack(); // Combine refs
+  } = useOverlayStack(); // SSR safety
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []); // Combine refs
 
   const combinedRef = React.useCallback(node => {
     menuRef.current = node;
@@ -206,8 +217,8 @@ const BaseMenu = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
     return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
   }, [PaperProps.sx, PaperProps.style, colors]); // Calculate position (only when standalone)
 
-  React.useLayoutEffect(() => {
-    if (isInsidePopover || !open || !anchorEl) return; // Safety check - make sure anchorEl is a valid DOM element
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || isInsidePopover || !open || !anchorEl) return; // Safety check - make sure anchorEl is a valid DOM element
 
     if (!(anchorEl instanceof Element)) return;
     const rect = anchorEl.getBoundingClientRect();
@@ -255,7 +266,7 @@ const BaseMenu = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
   }, [open, anchorEl, anchorOrigin, transformOrigin, isInsidePopover]); // Click outside and escape handling (only when standalone)
 
   React.useEffect(() => {
-    if (isInsidePopover || !open) return;
+    if (!canUseDOM() || isInsidePopover || !open) return;
 
     const handleClickOutside = e => {
       // Don't close if clicking inside the menu itself
@@ -301,10 +312,9 @@ const BaseMenu = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
   }, [open, onClose, anchorEl, isInsidePopover, isClickInsideOverlay]); // Focus first item on open
 
   React.useEffect(() => {
-    if (open && autoFocus && menuRef.current) {
-      const firstItem = menuRef.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
-      if (firstItem) firstItem.focus();
-    }
+    if (!canUseDOM() || !open || !autoFocus || !menuRef.current) return;
+    const firstItem = menuRef.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+    if (firstItem) firstItem.focus();
   }, [open, autoFocus]);
   if (!open && !keepMounted) return null;
 
@@ -353,7 +363,9 @@ const BaseMenu = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref)
   }, props), /*#__PURE__*/React__default["default"].createElement("ul", _extends__default["default"]({
     style: listStyle
   }, MenuListProps), children));
-  if (disablePortal) return content;
+  if (disablePortal) return content; // SSR safety - don't render portal until mounted
+
+  if (!mounted) return null;
   return /*#__PURE__*/ReactDOM.createPortal(content, document.body);
 });
 BaseMenu.displayName = "BaseMenu";
@@ -449,8 +461,8 @@ const BaseTabs = /*#__PURE__*/React__default["default"].forwardRef((_ref4, ref)
   const colorValue = (colors === null || colors === void 0 ? void 0 : colors[indicatorColor]) || (colors === null || colors === void 0 ? void 0 : colors.ibisRed);
   typeof colorValue === "object" ? colorValue.main : colorValue || "ibisRed.main"; // Update indicator position
 
-  React.useLayoutEffect(() => {
-    if (!tabsRef.current) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || !tabsRef.current) return;
     const tabs = tabsRef.current.querySelectorAll('[role="tab"]');
     const selectedTab = Array.from(tabs).find((tab, index) => {
       const tabValue = tab.dataset.value !== undefined ? tab.dataset.value : index;
@@ -774,6 +786,11 @@ const BaseSnackbar = /*#__PURE__*/React__default["default"].forwardRef((_ref8, r
   const {
     colors
   } = ThemeProvider.useTheme();
+  const [mounted, setMounted] = React.useState(false); // SSR safety
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
   const startTimer = React.useCallback(() => {
     if (autoHideDuration != null) {
       timerRef.current = setTimeout(() => {
@@ -796,7 +813,7 @@ const BaseSnackbar = /*#__PURE__*/React__default["default"].forwardRef((_ref8, r
   }, [open, startTimer, stopTimer]); // Pause timer on window blur
 
   React.useEffect(() => {
-    if (disableWindowBlurListener || !open) return;
+    if (!canUseDOM() || disableWindowBlurListener || !open) return;
 
     const handleBlur = () => stopTimer();
 
@@ -812,7 +829,9 @@ const BaseSnackbar = /*#__PURE__*/React__default["default"].forwardRef((_ref8, r
       window.removeEventListener("focus", handleFocus);
     };
   }, [open, disableWindowBlurListener, startTimer, stopTimer]);
-  if (!open) return null;
+  if (!open) return null; // SSR safety - don't render portal until mounted
+
+  if (!mounted || !canUseDOM()) return null;
 
   const positionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     position: "fixed",
@@ -908,10 +927,15 @@ const BasePopover = /*#__PURE__*/React__default["default"].forwardRef((_ref9, re
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = React.useState(false);
   const {
     registerOverlay,
     isClickInsideOverlay
-  } = useOverlayStack();
+  } = useOverlayStack(); // SSR safety
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
   const combinedRef = React.useCallback(node => {
     popoverRef.current = node;
 
@@ -933,8 +957,8 @@ const BasePopover = /*#__PURE__*/React__default["default"].forwardRef((_ref9, re
     return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
   }, [PaperProps.sx, PaperProps.style, colors]); // Calculate position
 
-  React.useLayoutEffect(() => {
-    if (!open) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || !open) return;
     let top = 0;
     let left = 0;
 
@@ -983,7 +1007,7 @@ const BasePopover = /*#__PURE__*/React__default["default"].forwardRef((_ref9, re
   }, [open, anchorEl, anchorOrigin, transformOrigin, anchorPosition, anchorReference, marginThreshold]); // Click outside handling
 
   React.useEffect(() => {
-    if (!open) return;
+    if (!canUseDOM() || !open) return;
 
     const handleClickOutside = e => {
       // Use a small delay to ensure ref is populated after portal render
@@ -1056,7 +1080,9 @@ const BasePopover = /*#__PURE__*/React__default["default"].forwardRef((_ref9, re
     style: popoverStyle,
     onClick: onClick
   }, props), children));
-  if (disablePortal) return content;
+  if (disablePortal) return content; // SSR safety - don't render portal until mounted
+
+  if (!mounted) return null;
   return /*#__PURE__*/ReactDOM.createPortal(content, document.body);
 });
 BasePopover.displayName = "BasePopover";
@@ -1088,10 +1114,15 @@ const BaseDrawer = /*#__PURE__*/React__default["default"].forwardRef((_ref10, re
     colors
   } = ThemeProvider.useTheme();
   const [isVisible, setIsVisible] = React.useState(open);
+  const [mounted, setMounted] = React.useState(false);
   const {
     registerOverlay
   } = useOverlayStack();
-  const drawerRef = React.useRef(null); // Resolve PaperProps.sx colors
+  const drawerRef = React.useRef(null); // SSR safety
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []); // Resolve PaperProps.sx colors
 
   const resolvedPaperStyle = React.useMemo(() => {
     const sxStyles = PaperProps.sx ? resolveStyleColors(PaperProps.sx, colors) : {};
@@ -1114,13 +1145,12 @@ const BaseDrawer = /*#__PURE__*/React__default["default"].forwardRef((_ref10, re
   }, [open, transitionDuration]); // Lock body scroll for temporary drawers
 
   React.useEffect(() => {
-    if (open && variant === "temporary") {
-      const originalOverflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      return () => {
-        document.body.style.overflow = originalOverflow;
-      };
-    }
+    if (!canUseDOM() || !open || variant !== "temporary") return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
   }, [open, variant]);
   const drawerWidth = (resolvedPaperStyle === null || resolvedPaperStyle === void 0 ? void 0 : resolvedPaperStyle.width) || ((_PaperProps$style = PaperProps.style) === null || _PaperProps$style === void 0 ? void 0 : _PaperProps$style.width) || "240px";
   const drawerHeight = (resolvedPaperStyle === null || resolvedPaperStyle === void 0 ? void 0 : resolvedPaperStyle.height) || ((_PaperProps$style2 = PaperProps.style) === null || _PaperProps$style2 === void 0 ? void 0 : _PaperProps$style2.height) || "auto";
@@ -1205,7 +1235,9 @@ const BaseDrawer = /*#__PURE__*/React__default["default"].forwardRef((_ref10, re
   } // Temporary drawer - with backdrop
 
 
-  if (!isVisible && !open) return null;
+  if (!isVisible && !open) return null; // SSR safety - don't render portal until mounted
+
+  if (!mounted || !canUseDOM()) return null;
 
   const backdropStyle = _objectSpread({
     position: "fixed",
@@ -1269,11 +1301,16 @@ const BaseTooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref11, r
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = React.useState(false);
   const anchorRef = React.useRef(null);
   const tooltipRef = React.useRef(null);
   const enterTimeoutRef = React.useRef(null);
   const leaveTimeoutRef = React.useRef(null);
-  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // Merge slotProps and componentsProps
+  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // SSR safety
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []); // Merge slotProps and componentsProps
 
   const mergedSlotProps = _objectSpread(_objectSpread({}, componentsProps), slotProps); // Resolve tooltip styles
 
@@ -1309,7 +1346,7 @@ const BaseTooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref11, r
     return _objectSpread(_objectSpread(_objectSpread({}, resolvedSx), popperSlotProps.style), popperPropsSx);
   }, [mergedSlotProps, PopperProps, colors]);
   const updatePosition = React.useCallback(() => {
-    if (!anchorRef.current || !tooltipRef.current) return;
+    if (!canUseDOM() || !anchorRef.current || !tooltipRef.current) return;
     const anchorRect = anchorRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const offset = 8;
@@ -1455,8 +1492,9 @@ const BaseTooltip = /*#__PURE__*/React__default["default"].forwardRef((_ref11, r
   }
 
   const clonedChild = /*#__PURE__*/React__default["default"].cloneElement(childElement, childProps);
-  if (!title) return clonedChild;
-  const tooltipContent = open ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
+  if (!title) return clonedChild; // SSR safety - don't render portal until mounted
+
+  const tooltipContent = open && mounted && canUseDOM() ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipRef,
     role: "tooltip",
     style: _objectSpread(_objectSpread({}, tooltipStyle), popperStyle)

package/dist/cjs/neo-components/withSx.js

@@ -21,10 +21,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined'; // Global style cache to avoid re-injecting same styles
+
+
 const styleCache = new Map();
 let styleSheet = null;
 
 function getStyleSheet() {
+  if (!canUseDOM()) return null;
   if (styleSheet) return styleSheet; // Check for existing stylesheet
 
   const existing = document.querySelector("style[data-blerp-sx]");
@@ -43,6 +47,8 @@ function getStyleSheet() {
 }
 
 function injectStyles(className, pseudoStyles, nestedStyles, mediaQueries, themeColors) {
+  if (!canUseDOM()) return;
+
   if (!className) {
     return;
   }
@@ -65,7 +71,8 @@ function injectStyles(className, pseudoStyles, nestedStyles, mediaQueries, theme
 
   if (css) {
     try {
-      const sheet = getStyleSheet(); // Split by newlines and insert each rule
+      const sheet = getStyleSheet();
+      if (!sheet) return; // Split by newlines and insert each rule
 
       css.split("\n").filter(Boolean).forEach(rule => {
         try {
@@ -137,12 +144,12 @@ function withSx(Component) {
     }, [sx, style, colors]); // Inject special styles (pseudo, nested, media queries)
 
     React.useEffect(() => {
-      if (typeof window !== "undefined" && pseudoClassName) {
+      if (canUseDOM() && pseudoClassName) {
         injectStyles(pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors);
       }
     }, [pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors]); // Also inject synchronously for SSR/initial render
 
-    if (typeof window !== "undefined" && pseudoClassName) {
+    if (canUseDOM() && pseudoClassName) {
       injectStyles(pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors);
     } // Combine classNames
 

package/dist/esm/neo-components/Autocomplete.js

@@ -11,10 +11,13 @@ const _excluded = ["options", "value", "defaultValue", "onChange", "onInputChang
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined';
 /**
  * Autocomplete - combo box with filtering
  */
 
+
 const AutocompleteBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     options = [],
@@ -163,6 +166,8 @@ const AutocompleteBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
 
   useEffect(() => {
+    if (!canUseDOM()) return;
+
     const handleClickOutside = event => {
       if (inputRef.current && !inputRef.current.contains(event.target) && listboxRef.current && !listboxRef.current.contains(event.target)) {
         handleClose();

package/dist/esm/neo-components/Dialog.js

@@ -233,6 +233,11 @@ const BaseModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   if (disablePortal) {
     return modalContent;
+  } // SSR check - don't use createPortal on the server
+
+
+  if (typeof window === 'undefined') {
+    return null;
   }
 
   return /*#__PURE__*/createPortal(modalContent, container || document.body);

package/dist/esm/neo-components/Input.js

@@ -39,6 +39,8 @@ const resolveStyles = (styleObj, colors) => {
 
   return resolved;
 };
+
+const canUseDOM = () => typeof window !== "undefined" && typeof document !== "undefined";
 /**
  * Input/TextField - Form input component (replaces MUI TextField)
  * Supports variants: outlined, filled, standard
@@ -329,7 +331,7 @@ const BaseInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const handleClick = e => {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
 
-    if (!disabled) {
+    if (!disabled && canUseDOM()) {
       const input = document.getElementById(id);
       input === null || input === void 0 ? void 0 : input.focus();
     }

package/dist/esm/neo-components/Layout.js

@@ -727,6 +727,7 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     style: iconStyle
   }, expandIcon));
 });
+AccordionSummary.displayName = "AccordionSummary";
 /**
  * AccordionDetails - Content area
  */

package/dist/esm/neo-components/Misc.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { withSx } from './withSx.js';
 import { useTheme } from './ThemeProvider.js';
@@ -18,6 +18,11 @@ const _excluded = ["orientation", "variant", "flexItem", "light", "textAlign", "
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined'; // Use useLayoutEffect only on client, useEffect on server
+
+
+const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
 /**
  * Divider - Visual separator (replaces MUI Divider)
  */
@@ -460,13 +465,18 @@ const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = useState(false);
   const timeoutRef = useRef(null);
   const childRef = useRef(null);
   const tooltipRef = useRef(null);
-  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // Calculate position based on child element and placement
+  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // SSR safety - only mount portal after hydration
+
+  useEffect(() => {
+    setMounted(true);
+  }, []); // Calculate position based on child element and placement
 
   const updatePosition = useCallback(() => {
-    if (!childRef.current) return;
+    if (!canUseDOM() || !childRef.current) return;
     const childRect = childRef.current.getBoundingClientRect();
     const tooltipEl = tooltipRef.current;
     const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : {
@@ -566,17 +576,16 @@ const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     });
   }, [placement]); // Update position when open changes or on scroll/resize
 
-  useLayoutEffect(() => {
-    if (open) {
-      updatePosition(); // Update position on scroll and resize
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || !open) return;
+    updatePosition(); // Update position on scroll and resize
 
-      window.addEventListener('scroll', updatePosition, true);
-      window.addEventListener('resize', updatePosition);
-      return () => {
-        window.removeEventListener('scroll', updatePosition, true);
-        window.removeEventListener('resize', updatePosition);
-      };
-    }
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
   }, [open, updatePosition]); // Re-calculate after tooltip renders (to get accurate dimensions)
 
   useEffect(() => {
@@ -677,9 +686,10 @@ const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }, (_componentsProps$tool3 = componentsProps.tooltip) === null || _componentsProps$tool3 === void 0 ? void 0 : _componentsProps$tool3.sx), PopperProps.sx), {}, {
     // Force background at the end to ensure it's never transparent
     backgroundColor
-  });
+  }); // Don't render portal during SSR or before mount
+
 
-  const tooltipContent = open && title ? /*#__PURE__*/React.createElement("span", {
+  const tooltipContent = open && title && mounted && canUseDOM() ? /*#__PURE__*/React.createElement("span", {
     ref: tooltipRef,
     role: "tooltip",
     style: tooltipStyle

package/dist/esm/neo-components/Navigation.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, useRef, useState, useCallback, useEffect, useMemo, useLayoutEffect, createContext } from 'react';
+import React, { useContext, useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect, createContext } from 'react';
 import { createPortal } from 'react-dom';
 import { withSx } from './withSx.js';
 import { useTheme } from './ThemeProvider.js';
@@ -21,6 +21,11 @@ const _excluded = ["open", "onClose", "anchorEl", "anchorOrigin", "transformOrig
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined'; // Use useLayoutEffect only on client, useEffect on server
+
+
+const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
 /**
  * Context to detect if we're inside a Popover
  */
@@ -95,6 +100,7 @@ function resolveStyleColors(style, colors) {
 
 
 function isClickInsideAnyOverlay(target, excludeElement) {
+  if (!canUseDOM()) return false;
   let element = target;
 
   while (element && element !== document.body) {
@@ -169,10 +175,15 @@ const BaseMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = useState(false);
   const {
     registerOverlay,
     isClickInsideOverlay
-  } = useOverlayStack(); // Combine refs
+  } = useOverlayStack(); // SSR safety
+
+  useEffect(() => {
+    setMounted(true);
+  }, []); // Combine refs
 
   const combinedRef = useCallback(node => {
     menuRef.current = node;
@@ -195,8 +206,8 @@ const BaseMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
   }, [PaperProps.sx, PaperProps.style, colors]); // Calculate position (only when standalone)
 
-  useLayoutEffect(() => {
-    if (isInsidePopover || !open || !anchorEl) return; // Safety check - make sure anchorEl is a valid DOM element
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || isInsidePopover || !open || !anchorEl) return; // Safety check - make sure anchorEl is a valid DOM element
 
     if (!(anchorEl instanceof Element)) return;
     const rect = anchorEl.getBoundingClientRect();
@@ -244,7 +255,7 @@ const BaseMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, [open, anchorEl, anchorOrigin, transformOrigin, isInsidePopover]); // Click outside and escape handling (only when standalone)
 
   useEffect(() => {
-    if (isInsidePopover || !open) return;
+    if (!canUseDOM() || isInsidePopover || !open) return;
 
     const handleClickOutside = e => {
       // Don't close if clicking inside the menu itself
@@ -290,10 +301,9 @@ const BaseMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, [open, onClose, anchorEl, isInsidePopover, isClickInsideOverlay]); // Focus first item on open
 
   useEffect(() => {
-    if (open && autoFocus && menuRef.current) {
-      const firstItem = menuRef.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
-      if (firstItem) firstItem.focus();
-    }
+    if (!canUseDOM() || !open || !autoFocus || !menuRef.current) return;
+    const firstItem = menuRef.current.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+    if (firstItem) firstItem.focus();
   }, [open, autoFocus]);
   if (!open && !keepMounted) return null;
 
@@ -342,7 +352,9 @@ const BaseMenu = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, props), /*#__PURE__*/React.createElement("ul", _extends({
     style: listStyle
   }, MenuListProps), children));
-  if (disablePortal) return content;
+  if (disablePortal) return content; // SSR safety - don't render portal until mounted
+
+  if (!mounted) return null;
   return /*#__PURE__*/createPortal(content, document.body);
 });
 BaseMenu.displayName = "BaseMenu";
@@ -438,8 +450,8 @@ const BaseTabs = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   const colorValue = (colors === null || colors === void 0 ? void 0 : colors[indicatorColor]) || (colors === null || colors === void 0 ? void 0 : colors.ibisRed);
   typeof colorValue === "object" ? colorValue.main : colorValue || "ibisRed.main"; // Update indicator position
 
-  useLayoutEffect(() => {
-    if (!tabsRef.current) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || !tabsRef.current) return;
     const tabs = tabsRef.current.querySelectorAll('[role="tab"]');
     const selectedTab = Array.from(tabs).find((tab, index) => {
       const tabValue = tab.dataset.value !== undefined ? tab.dataset.value : index;
@@ -763,6 +775,11 @@ const BaseSnackbar = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   const {
     colors
   } = useTheme();
+  const [mounted, setMounted] = useState(false); // SSR safety
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   const startTimer = useCallback(() => {
     if (autoHideDuration != null) {
       timerRef.current = setTimeout(() => {
@@ -785,7 +802,7 @@ const BaseSnackbar = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   }, [open, startTimer, stopTimer]); // Pause timer on window blur
 
   useEffect(() => {
-    if (disableWindowBlurListener || !open) return;
+    if (!canUseDOM() || disableWindowBlurListener || !open) return;
 
     const handleBlur = () => stopTimer();
 
@@ -801,7 +818,9 @@ const BaseSnackbar = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
       window.removeEventListener("focus", handleFocus);
     };
   }, [open, disableWindowBlurListener, startTimer, stopTimer]);
-  if (!open) return null;
+  if (!open) return null; // SSR safety - don't render portal until mounted
+
+  if (!mounted || !canUseDOM()) return null;
 
   const positionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     position: "fixed",
@@ -897,10 +916,15 @@ const BasePopover = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = useState(false);
   const {
     registerOverlay,
     isClickInsideOverlay
-  } = useOverlayStack();
+  } = useOverlayStack(); // SSR safety
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   const combinedRef = useCallback(node => {
     popoverRef.current = node;
 
@@ -922,8 +946,8 @@ const BasePopover = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     return _objectSpread(_objectSpread({}, sxStyles), PaperProps.style);
   }, [PaperProps.sx, PaperProps.style, colors]); // Calculate position
 
-  useLayoutEffect(() => {
-    if (!open) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!canUseDOM() || !open) return;
     let top = 0;
     let left = 0;
 
@@ -972,7 +996,7 @@ const BasePopover = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   }, [open, anchorEl, anchorOrigin, transformOrigin, anchorPosition, anchorReference, marginThreshold]); // Click outside handling
 
   useEffect(() => {
-    if (!open) return;
+    if (!canUseDOM() || !open) return;
 
     const handleClickOutside = e => {
       // Use a small delay to ensure ref is populated after portal render
@@ -1045,7 +1069,9 @@ const BasePopover = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     style: popoverStyle,
     onClick: onClick
   }, props), children));
-  if (disablePortal) return content;
+  if (disablePortal) return content; // SSR safety - don't render portal until mounted
+
+  if (!mounted) return null;
   return /*#__PURE__*/createPortal(content, document.body);
 });
 BasePopover.displayName = "BasePopover";
@@ -1077,10 +1103,15 @@ const BaseDrawer = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
     colors
   } = useTheme();
   const [isVisible, setIsVisible] = useState(open);
+  const [mounted, setMounted] = useState(false);
   const {
     registerOverlay
   } = useOverlayStack();
-  const drawerRef = useRef(null); // Resolve PaperProps.sx colors
+  const drawerRef = useRef(null); // SSR safety
+
+  useEffect(() => {
+    setMounted(true);
+  }, []); // Resolve PaperProps.sx colors
 
   const resolvedPaperStyle = useMemo(() => {
     const sxStyles = PaperProps.sx ? resolveStyleColors(PaperProps.sx, colors) : {};
@@ -1103,13 +1134,12 @@ const BaseDrawer = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   }, [open, transitionDuration]); // Lock body scroll for temporary drawers
 
   useEffect(() => {
-    if (open && variant === "temporary") {
-      const originalOverflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      return () => {
-        document.body.style.overflow = originalOverflow;
-      };
-    }
+    if (!canUseDOM() || !open || variant !== "temporary") return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
   }, [open, variant]);
   const drawerWidth = (resolvedPaperStyle === null || resolvedPaperStyle === void 0 ? void 0 : resolvedPaperStyle.width) || ((_PaperProps$style = PaperProps.style) === null || _PaperProps$style === void 0 ? void 0 : _PaperProps$style.width) || "240px";
   const drawerHeight = (resolvedPaperStyle === null || resolvedPaperStyle === void 0 ? void 0 : resolvedPaperStyle.height) || ((_PaperProps$style2 = PaperProps.style) === null || _PaperProps$style2 === void 0 ? void 0 : _PaperProps$style2.height) || "auto";
@@ -1194,7 +1224,9 @@ const BaseDrawer = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   } // Temporary drawer - with backdrop
 
 
-  if (!isVisible && !open) return null;
+  if (!isVisible && !open) return null; // SSR safety - don't render portal until mounted
+
+  if (!mounted || !canUseDOM()) return null;
 
   const backdropStyle = _objectSpread({
     position: "fixed",
@@ -1258,11 +1290,16 @@ const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     top: 0,
     left: 0
   });
+  const [mounted, setMounted] = useState(false);
   const anchorRef = useRef(null);
   const tooltipRef = useRef(null);
   const enterTimeoutRef = useRef(null);
   const leaveTimeoutRef = useRef(null);
-  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // Merge slotProps and componentsProps
+  const open = controlledOpen !== undefined ? controlledOpen : isOpen; // SSR safety
+
+  useEffect(() => {
+    setMounted(true);
+  }, []); // Merge slotProps and componentsProps
 
   const mergedSlotProps = _objectSpread(_objectSpread({}, componentsProps), slotProps); // Resolve tooltip styles
 
@@ -1298,7 +1335,7 @@ const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     return _objectSpread(_objectSpread(_objectSpread({}, resolvedSx), popperSlotProps.style), popperPropsSx);
   }, [mergedSlotProps, PopperProps, colors]);
   const updatePosition = useCallback(() => {
-    if (!anchorRef.current || !tooltipRef.current) return;
+    if (!canUseDOM() || !anchorRef.current || !tooltipRef.current) return;
     const anchorRect = anchorRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const offset = 8;
@@ -1444,8 +1481,9 @@ const BaseTooltip = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   }
 
   const clonedChild = /*#__PURE__*/React.cloneElement(childElement, childProps);
-  if (!title) return clonedChild;
-  const tooltipContent = open ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+  if (!title) return clonedChild; // SSR safety - don't render portal until mounted
+
+  const tooltipContent = open && mounted && canUseDOM() ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     ref: tooltipRef,
     role: "tooltip",
     style: _objectSpread(_objectSpread({}, tooltipStyle), popperStyle)

package/dist/esm/neo-components/withSx.js

@@ -11,10 +11,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+const canUseDOM = () => typeof window !== 'undefined' && typeof document !== 'undefined'; // Global style cache to avoid re-injecting same styles
+
+
 const styleCache = new Map();
 let styleSheet = null;
 
 function getStyleSheet() {
+  if (!canUseDOM()) return null;
   if (styleSheet) return styleSheet; // Check for existing stylesheet
 
   const existing = document.querySelector("style[data-blerp-sx]");
@@ -33,6 +37,8 @@ function getStyleSheet() {
 }
 
 function injectStyles(className, pseudoStyles, nestedStyles, mediaQueries, themeColors) {
+  if (!canUseDOM()) return;
+
   if (!className) {
     return;
   }
@@ -55,7 +61,8 @@ function injectStyles(className, pseudoStyles, nestedStyles, mediaQueries, theme
 
   if (css) {
     try {
-      const sheet = getStyleSheet(); // Split by newlines and insert each rule
+      const sheet = getStyleSheet();
+      if (!sheet) return; // Split by newlines and insert each rule
 
       css.split("\n").filter(Boolean).forEach(rule => {
         try {
@@ -127,12 +134,12 @@ function withSx(Component) {
     }, [sx, style, colors]); // Inject special styles (pseudo, nested, media queries)
 
     useEffect(() => {
-      if (typeof window !== "undefined" && pseudoClassName) {
+      if (canUseDOM() && pseudoClassName) {
         injectStyles(pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors);
       }
     }, [pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors]); // Also inject synchronously for SSR/initial render
 
-    if (typeof window !== "undefined" && pseudoClassName) {
+    if (canUseDOM() && pseudoClassName) {
       injectStyles(pseudoClassName, pseudoStyles, nestedStyles, mediaQueries, colors);
     } // Combine classNames
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blerp/design",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Blerp UI",
   "main": "dist/esm/index.js",
   "scripts": {