@msviderok/base-ui-solid 1.0.0-beta.1 → 1.0.0-beta.3

package/esm/navigation-menu/positioner/NavigationMenuPositioner.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { getSide } from '@floating-ui/utils';
 import { createEffect, createSignal, onCleanup } from 'solid-js';
 import { disableFocusInside, enableFocusInside, isOutsideEvent } from "../../floating-ui-solid/utils.js";
@@ -11,7 +12,6 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuPortalContext } from "../portal/NavigationMenuPortalContext.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
 import { NavigationMenuPositionerContext } from "./NavigationMenuPositionerContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const adaptiveOrigin = {
   name: 'adaptiveOrigin',
   async fn(state) {
@@ -207,8 +207,10 @@ export function NavigationMenuPositioner(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(NavigationMenuPositionerContext.Provider, {
+  return _$createComponent(NavigationMenuPositionerContext.Provider, {
     value: positioning,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/navigation-menu/root/NavigationMenuRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { isHTMLElement } from '@floating-ui/utils/dom';
 import { batch, createMemo, createSignal, Show, splitProps } from 'solid-js';
 import { FloatingTree, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-solid/index.js";
@@ -15,7 +16,6 @@ import { NavigationMenuRootContext, NavigationMenuTreeContext, useNavigationMenu
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuRoot(componentProps) {
   const [local] = splitProps(componentProps, ['defaultValue', 'value', 'onValueChange', 'actionsRef', 'delay', 'closeDelay', 'orientation', 'onOpenChangeComplete']);
   const defaultValue = () => local.defaultValue ?? null;
@@ -115,19 +115,27 @@ export function NavigationMenuRoot(componentProps) {
     closeDelay,
     orientation
   };
-  const element = () => /*#__PURE__*/_jsx(NavigationMenuRootContext.Provider, {
+  const element = () => _$createComponent(NavigationMenuRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(TreeContext, {
-      ...componentProps
-    })
+    get children() {
+      return _$createComponent(TreeContext, componentProps);
+    }
   });
   if (process.env.NODE_ENV !== "production") element.displayName = "element";
-  return /*#__PURE__*/_jsx(Show, {
-    when: nested(),
-    fallback: /*#__PURE__*/_jsx(FloatingTree, {
-      children: element()
-    }),
-    children: element()
+  return _$createComponent(Show, {
+    get when() {
+      return nested();
+    },
+    get fallback() {
+      return _$createComponent(FloatingTree, {
+        get children() {
+          return element();
+        }
+      });
+    },
+    get children() {
+      return element();
+    }
   });
 }
 function TreeContext(componentProps) {
@@ -159,8 +167,10 @@ function TreeContext(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(NavigationMenuTreeContext.Provider, {
+  return _$createComponent(NavigationMenuTreeContext.Provider, {
     value: nodeId,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -1,3 +1,10 @@
+import { template as _$template } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span>`);
 import { batch, createEffect, createSignal, onCleanup } from 'solid-js';
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { safePolygon, useClick, useDismiss, useFloatingRootContext, useFloatingTree, useHover, useInteractions } from "../../floating-ui-solid/index.js";
@@ -18,7 +25,6 @@ import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.
 import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
 import { isOutsideMenuEvent } from "../utils/isOutsideMenuEvent.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const TRIGGER_IDENTIFIER = 'data-navigation-menu-trigger';
 
 /**
@@ -314,53 +320,59 @@ export function NavigationMenuTrigger(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(CompositeItem, {
-      render: element
-    }), isActiveItem() && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(FocusGuard, {
-        ref: el => {
-          refs.beforeOutsideRef = el;
-        },
-        onFocus: event => {
-          const positionerEl = positionerElement();
-          const triggerEl = triggerElement();
-          if (positionerEl && isOutsideEvent(event, positionerEl)) {
-            queueMicrotask(() => {
-              refs.beforeInsideRef?.focus();
-            });
-          } else {
-            queueMicrotask(() => {
-              const prevTabbable = getPreviousTabbable(triggerEl);
-              prevTabbable?.focus();
-            });
-          }
-        }
-      }), /*#__PURE__*/_jsx("span", {
-        "aria-owns": popupElement()?.id,
-        style: visuallyHidden
-      }), /*#__PURE__*/_jsx(FocusGuard, {
-        ref: el => {
-          refs.afterOutsideRef = el;
-        },
-        onFocus: event => {
-          const positionerEl = positionerElement();
-          const triggerEl = triggerElement();
-          if (positionerEl && isOutsideEvent(event, positionerEl)) {
-            queueMicrotask(() => {
-              refs.afterInsideRef?.focus();
-            });
-          } else {
-            queueMicrotask(() => {
-              const nextTabbable = getNextTabbable(triggerEl);
-              nextTabbable?.focus();
-              if (!contains(refs.rootRef, nextTabbable)) {
-                setValue(null, event, 'focus-out');
-              }
-            });
+  return [_$createComponent(CompositeItem, {
+    render: element
+  }), _$memo(() => _$memo(() => !!isActiveItem())() && [_$createComponent(FocusGuard, {
+    ref: el => {
+      refs.beforeOutsideRef = el;
+    },
+    onFocus: event => {
+      const positionerEl = positionerElement();
+      const triggerEl = triggerElement();
+      if (positionerEl && isOutsideEvent(event, positionerEl)) {
+        queueMicrotask(() => {
+          refs.beforeInsideRef?.focus();
+        });
+      } else {
+        queueMicrotask(() => {
+          const prevTabbable = getPreviousTabbable(triggerEl);
+          prevTabbable?.focus();
+        });
+      }
+    }
+  }), (() => {
+    var _el$ = _tmpl$();
+    _$effect(_p$ => {
+      var _v$ = popupElement()?.id,
+        _v$2 = visuallyHidden;
+      _v$ !== _p$.e && _$setAttribute(_el$, "aria-owns", _p$.e = _v$);
+      _p$.t = _$style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })(), _$createComponent(FocusGuard, {
+    ref: el => {
+      refs.afterOutsideRef = el;
+    },
+    onFocus: event => {
+      const positionerEl = positionerElement();
+      const triggerEl = triggerElement();
+      if (positionerEl && isOutsideEvent(event, positionerEl)) {
+        queueMicrotask(() => {
+          refs.afterInsideRef?.focus();
+        });
+      } else {
+        queueMicrotask(() => {
+          const nextTabbable = getNextTabbable(triggerEl);
+          nextTabbable?.focus();
+          if (!contains(refs.rootRef, nextTabbable)) {
+            setValue(null, event, 'focus-out');
           }
-        }
-      })]
-    })]
-  });
+        });
+      }
+    }
+  })])];
 }

package/esm/navigation-menu/viewport/NavigationMenuViewport.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
@@ -8,7 +9,6 @@ import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NavigationMenuViewport(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -18,7 +18,5 @@ export function NavigationMenuViewport(componentProps) {
     ref: setViewportElement,
     props: elementProps
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/number-field/decrement/NumberFieldDecrement.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useButton } from "../../use-button/index.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -11,7 +12,6 @@ import { styleHookMapping } from "../utils/styleHooks.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NumberFieldDecrement(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled']);
   const {
@@ -65,7 +65,5 @@ export function NumberFieldDecrement(componentProps) {
     props: [props, elementProps, getButtonProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/number-field/group/NumberFieldGroup.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
@@ -9,7 +10,6 @@ import { styleHookMapping } from "../utils/styleHooks.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NumberFieldGroup(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -22,7 +22,5 @@ export function NumberFieldGroup(componentProps) {
     }, elementProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/number-field/increment/NumberFieldIncrement.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useButton } from "../../use-button/index.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -11,7 +12,6 @@ import { styleHookMapping } from "../utils/styleHooks.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function NumberFieldIncrement(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled']);
   const {
@@ -65,7 +65,5 @@ export function NumberFieldIncrement(componentProps) {
     props: [props, elementProps, getButtonProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/number-field/input/NumberFieldInput.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { batch, createEffect } from 'solid-js';
 import { useFieldControlValidation } from "../../field/control/useFieldControlValidation.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
@@ -13,7 +14,6 @@ import { useNumberFieldRootContext } from "../root/NumberFieldRootContext.js";
 import { DEFAULT_STEP } from "../utils/constants.js";
 import { ARABIC_RE, HAN_RE, getNumberLocaleDetails, parseNumber } from "../utils/parse.js";
 import { styleHookMapping } from "../utils/styleHooks.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...fieldValidityMapping,
   ...styleHookMapping
@@ -308,7 +308,5 @@ export function NumberFieldInput(componentProps) {
     props: [inputProps, props => mergeProps(props, getInputValidationProps()), props => mergeProps(props, getValidationProps()), elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/number-field/root/NumberFieldRoot.js

@@ -1,3 +1,10 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<input type=hidden>`);
 import { batch, createEffect, createSignal, on, onCleanup, onMount, Show, mergeProps as solidMergeProps } from 'solid-js';
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -21,7 +28,6 @@ import { NumberFieldRootContext } from "./NumberFieldRootContext.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function NumberFieldRoot(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id', 'min', 'max', 'smallStep', 'step', 'largeStep', 'required', 'disabled', 'readOnly', 'name', 'defaultValue', 'value', 'onValueChange', 'allowWheelScrub', 'snapOnStep', 'format', 'locale', 'refs']);
   const smallStep = () => local.smallStep ?? 0.1;
@@ -319,23 +325,38 @@ export function NumberFieldRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsxs(NumberFieldRootContext.Provider, {
+  return _$createComponent(NumberFieldRootContext.Provider, {
     value: contextValue,
-    children: [element(), /*#__PURE__*/_jsx(Show, {
-      when: name(),
-      children: /*#__PURE__*/_jsx("input", {
-        type: "hidden",
-        name: name(),
-        ref: el => {
-          if (local.refs) {
-            local.refs.inputRef = el;
-          }
+    get children() {
+      return [_$memo(() => element()), _$createComponent(Show, {
+        get when() {
+          return name();
         },
-        value: value() ?? '',
-        disabled: disabled(),
-        required: required()
-      })
-    })]
+        get children() {
+          var _el$ = _tmpl$();
+          _$use(el => {
+            if (local.refs) {
+              local.refs.inputRef = el;
+            }
+          }, _el$);
+          _$effect(_p$ => {
+            var _v$ = name(),
+              _v$2 = disabled(),
+              _v$3 = required();
+            _v$ !== _p$.e && _$setAttribute(_el$, "name", _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$.disabled = _p$.t = _v$2);
+            _v$3 !== _p$.a && (_el$.required = _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          _$effect(() => _el$.value = value() ?? '');
+          return _el$;
+        }
+      })];
+    }
   });
 }
 function getControlledInputValue(value, locale, format) {

package/esm/number-field/scrub-area/NumberFieldScrubArea.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, createSignal, onCleanup } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { isWebKit } from "../../utils/detectBrowser.js";
@@ -16,7 +17,6 @@ import { NumberFieldScrubAreaContext } from "./NumberFieldScrubAreaContext.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function NumberFieldScrubArea(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['direction', 'pixelSensitivity', 'teleportDistance']);
   const direction = () => local.direction ?? 'horizontal';
@@ -219,8 +219,10 @@ export function NumberFieldScrubArea(componentProps) {
     props: [defaultProps, elementProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsx(NumberFieldScrubAreaContext.Provider, {
+  return _$createComponent(NumberFieldScrubAreaContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createSignal } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -17,7 +18,6 @@ import { styleHookMapping } from "../utils/styleHooks.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function NumberFieldScrubAreaCursor(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -49,8 +49,12 @@ export function NumberFieldScrubAreaCursor(componentProps) {
     }, elementProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsx(Portal, {
-    mount: ownerDocument(domElement()).body,
-    children: element()
+  return _$createComponent(Portal, {
+    get mount() {
+      return ownerDocument(domElement()).body;
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/esm/popover/arrow/PopoverArrow.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -10,7 +11,6 @@ import { usePopoverRootContext } from "../root/PopoverRootContext.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function PopoverArrow(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -48,7 +48,5 @@ export function PopoverArrow(componentProps) {
       'aria-hidden': true
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/popover/backdrop/PopoverBackdrop.js

@@ -1,9 +1,9 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
 import { transitionStatusMapping } from "../../utils/styleHookMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -48,7 +48,5 @@ export function PopoverBackdrop(props) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/popover/close/PopoverClose.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
@@ -7,7 +8,6 @@ import { usePopoverRootContext } from "../root/PopoverRootContext.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function PopoverClose(props) {
   const [,, elementProps] = splitComponentProps(props, []);
   const {
@@ -20,7 +20,5 @@ export function PopoverClose(props) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/popover/description/PopoverDescription.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { onMount } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -10,7 +11,6 @@ import { usePopoverRootContext } from "../root/PopoverRootContext.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function PopoverDescription(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -35,7 +35,5 @@ export function PopoverDescription(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/popover/popup/PopoverPopup.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { FloatingFocusManager } from "../../floating-ui-solid/index.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -8,7 +10,6 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.js";
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -95,12 +96,24 @@ export function PopoverPopup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(FloatingFocusManager, {
-    context: positioner.context,
-    modal: modal() === 'trap-focus',
-    disabled: !mounted() || openReason() === 'trigger-hover',
-    initialFocus: resolvedInitialFocus(),
-    returnFocus: local.finalFocus,
-    children: element()
+  return _$createComponent(FloatingFocusManager, {
+    get context() {
+      return positioner.context;
+    },
+    get modal() {
+      return modal() === 'trap-focus';
+    },
+    get disabled() {
+      return !mounted() || openReason() === 'trigger-hover';
+    },
+    get initialFocus() {
+      return resolvedInitialFocus();
+    },
+    get returnFocus() {
+      return local.finalFocus;
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/esm/popover/portal/PopoverPortal.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { Show } from 'solid-js';
 import { FloatingPortal } from "../../floating-ui-solid/index.js";
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
@@ -9,21 +10,30 @@ import { PopoverPortalContext } from "./PopoverPortalContext.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function PopoverPortal(props) {
   const keepMounted = () => props.keepMounted ?? false;
   const {
     mounted
   } = usePopoverRootContext();
   const shouldRender = () => mounted() || keepMounted();
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/_jsx(PopoverPortalContext.Provider, {
-      value: keepMounted,
-      children: /*#__PURE__*/_jsx(FloatingPortal, {
-        root: props.container,
-        children: props.children
-      })
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return _$createComponent(PopoverPortalContext.Provider, {
+        value: keepMounted,
+        get children() {
+          return _$createComponent(FloatingPortal, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }