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

package/esm/toast/close/ToastClose.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useButton } from "../../use-button/useButton.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -10,7 +11,6 @@ import { useToastRootContext } from "../root/ToastRootContext.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function ToastClose(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'nativeButton']);
   const nativeButton = () => local.nativeButton ?? true;
@@ -41,7 +41,5 @@ export function ToastClose(componentProps) {
       }
     }, elementProps, getButtonProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/toast/description/ToastDescription.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 { useId } from "../../utils/useId.js";
@@ -11,7 +12,6 @@ import { useToastRootContext } from "../root/ToastRootContext.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function ToastDescription(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -46,12 +46,8 @@ export function ToastDescription(componentProps) {
       }
     }, elementProps],
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: componentProps.children ?? toast().description
-      });
+      return _$memo(() => componentProps.children ?? toast().description);
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/toast/portal/ToastPortal.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
 
 /**
@@ -6,10 +7,13 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ToastPortal(props) {
-  return /*#__PURE__*/_jsx(FloatingPortalLite, {
-    root: props.container,
-    children: props.children
+  return _$createComponent(FloatingPortalLite, {
+    get root() {
+      return props.container;
+    },
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/toast/provider/ToastProvider.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
 import { createStore, produce } from 'solid-js/store';
 import { activeElement, contains } from "../../floating-ui-solid/utils.js";
@@ -7,7 +8,6 @@ import { useTimeout } from "../../utils/useTimeout.js";
 import { isFocusVisible } from "../utils/focusVisible.js";
 import { resolvePromiseOptions } from "../utils/resolvePromiseOptions.js";
 import { ToastContext } from "./ToastProviderContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Provides a context for creating and managing toasts.
  *
@@ -299,8 +299,10 @@ export function ToastProvider(props) {
     hasDifferingHeights,
     refs
   };
-  return /*#__PURE__*/_jsx(ToastContext.Provider, {
+  return _$createComponent(ToastContext.Provider, {
     value: contextValue,
-    children: props.children
+    get children() {
+      return props.children;
+    }
   });
 }

package/esm/toast/root/ToastRoot.js

@@ -1,3 +1,12 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div>`);
 import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { activeElement, contains, getTarget } from "../../floating-ui-solid/utils.js";
@@ -12,7 +21,6 @@ import { visuallyHidden } from "../../utils/visuallyHidden.js";
 import { useToastContext } from "../provider/ToastProviderContext.js";
 import { ToastRootContext } from "./ToastRootContext.js";
 import { ToastRootCssVars } from "./ToastRootCssVars.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...transitionStatusMapping,
   swipeDirection(value) {
@@ -535,29 +543,36 @@ export function ToastRoot(componentProps) {
     props: [props, elementProps],
     customStyleHookMapping,
     get children() {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [componentProps.children, !focused() && /*#__PURE__*/_jsx("div", {
-          style: visuallyHidden,
-          ...(local.toast.priority === 'high' ? {
-            role: 'alert',
-            'aria-atomic': true
-          } : {
-            role: 'status',
-            'aria-live': 'polite'
-          }),
-          children: toastRoot.renderScreenReaderContent() && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [local.toast.title && /*#__PURE__*/_jsx("div", {
-              children: local.toast.title
-            }), local.toast.description && /*#__PURE__*/_jsx("div", {
-              children: local.toast.description
-            })]
-          })
-        })]
-      });
+      return [_$memo(() => componentProps.children), _$memo(() => _$memo(() => !!!focused())() && (() => {
+        var _el$ = _tmpl$();
+        _$spread(_el$, _$mergeProps(() => local.toast.priority === 'high' ? {
+          role: 'alert',
+          'aria-atomic': true
+        } : {
+          role: 'status',
+          'aria-live': 'polite'
+        }), false, true);
+        _$insert(_el$, (() => {
+          var _c$ = _$memo(() => !!toastRoot.renderScreenReaderContent());
+          return () => _c$() && [_$memo(() => _$memo(() => !!local.toast.title)() && (() => {
+            var _el$2 = _tmpl$();
+            _$insert(_el$2, () => local.toast.title);
+            return _el$2;
+          })()), _$memo(() => _$memo(() => !!local.toast.description)() && (() => {
+            var _el$3 = _tmpl$();
+            _$insert(_el$3, () => local.toast.description);
+            return _el$3;
+          })())];
+        })());
+        _$effect(_$p => _$style(_el$, visuallyHidden, _$p));
+        return _el$;
+      })())];
     }
   });
-  return /*#__PURE__*/_jsx(ToastRootContext.Provider, {
+  return _$createComponent(ToastRootContext.Provider, {
     value: toastRoot,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/toast/title/ToastTitle.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 { useId } from "../../utils/useId.js";
@@ -10,7 +11,6 @@ import { useToastRootContext } from "../root/ToastRootContext.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function ToastTitle(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -45,12 +45,8 @@ export function ToastTitle(componentProps) {
       }
     }, elementProps],
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: componentProps.children ?? toast().title
-      });
+      return _$memo(() => componentProps.children ?? toast().title);
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/toast/utils/test-utils.js

@@ -1,18 +1,20 @@
-var _Toast$Title, _Toast$Description, _Toast$Close, _Toast$Action;
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button>add`);
 import { For } from 'solid-js';
 import { Toast } from "../index.js";
 
 /**
  * @internal
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Button() {
   const {
     add
   } = Toast.useToastManager();
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    onClick: () => {
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = () => {
       add({
         title: 'title',
         description: 'description',
@@ -21,9 +23,9 @@ export function Button() {
           children: 'action'
         }
       });
-    },
-    children: "add"
-  });
+    };
+    return _el$;
+  })();
 }
 
 /**
@@ -33,20 +35,25 @@ export function List() {
   const {
     toasts
   } = Toast.useToastManager();
-  return /*#__PURE__*/_jsx(For, {
-    each: toasts(),
-    children: toastItem => /*#__PURE__*/_jsxs(Toast.Root, {
+  return _$createComponent(For, {
+    get each() {
+      return toasts();
+    },
+    children: toastItem => _$createComponent(Toast.Root, {
       toast: toastItem,
       "data-testid": "root",
-      children: [_Toast$Title || (_Toast$Title = /*#__PURE__*/_jsx(Toast.Title, {
-        "data-testid": "title"
-      })), _Toast$Description || (_Toast$Description = /*#__PURE__*/_jsx(Toast.Description, {
-        "data-testid": "description"
-      })), _Toast$Close || (_Toast$Close = /*#__PURE__*/_jsx(Toast.Close, {
-        "aria-label": "close-press"
-      })), _Toast$Action || (_Toast$Action = /*#__PURE__*/_jsx(Toast.Action, {
-        "data-testid": "action"
-      }))]
+      get children() {
+        return [_$createComponent(Toast.Title, {
+          "data-testid": "title"
+        }), _$createComponent(Toast.Description, {
+          "data-testid": "description"
+        }), _$createComponent(Toast.Close, {
+          "aria-label": "close-press"
+        }), _$createComponent(Toast.Action, {
+          "data-testid": "action"
+        })];
+      }
     })
   });
-}
+}
+_$delegateEvents(["click"]);

package/esm/toast/viewport/ToastViewport.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, onCleanup } from 'solid-js';
 import { activeElement, contains, getTarget } from "../../floating-ui-solid/utils.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -14,9 +16,7 @@ import { ToastViewportContext } from "./ToastViewportContext.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function ToastViewport(componentProps) {
-  var _FocusGuard, _FocusGuard2;
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
     toasts,
@@ -191,19 +191,19 @@ export function ToastViewport(componentProps) {
     },
     props: [props, elementProps],
     get children() {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [numToasts() > 0 && prevFocusElement() && (_FocusGuard || (_FocusGuard = /*#__PURE__*/_jsx(FocusGuard, {
-          onFocus: handleFocusGuard
-        }))), componentProps.children, numToasts() > 0 && prevFocusElement() && (_FocusGuard2 || (_FocusGuard2 = /*#__PURE__*/_jsx(FocusGuard, {
-          onFocus: handleFocusGuard
-        })))]
-      });
+      return [_$memo(() => _$memo(() => !!(numToasts() > 0 && prevFocusElement()))() && _$createComponent(FocusGuard, {
+        onFocus: handleFocusGuard
+      })), _$memo(() => componentProps.children), _$memo(() => _$memo(() => !!(numToasts() > 0 && prevFocusElement()))() && _$createComponent(FocusGuard, {
+        onFocus: handleFocusGuard
+      }))];
     }
   });
-  return /*#__PURE__*/_jsxs(ToastViewportContext.Provider, {
+  return _$createComponent(ToastViewportContext.Provider, {
     value: contextValue,
-    children: [numToasts() > 0 && prevFocusElement() && /*#__PURE__*/_jsx(FocusGuard, {
-      onFocus: handleFocusGuard
-    }), element()]
+    get children() {
+      return [_$memo(() => _$memo(() => !!(numToasts() > 0 && prevFocusElement()))() && _$createComponent(FocusGuard, {
+        onFocus: handleFocusGuard
+      })), _$memo(() => element())];
+    }
   });
 }

package/esm/toggle/Toggle.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, Show } from 'solid-js';
 import { CompositeItem } from "../composite/item/CompositeItem.js";
 import { splitComponentProps } from "../solid-helpers.js";
@@ -12,7 +13,6 @@ import { useRenderElement } from "../utils/useRenderElement.js";
  *
  * Documentation: [Base UI Toggle](https://base-ui.com/react/components/toggle)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function Toggle(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['defaultPressed', 'disabled', 'form', 'onPressedChange', 'pressed', 'type', 'value', 'nativeButton']);
   const defaultPressedProp = () => local.defaultPressed ?? false;
@@ -66,11 +66,15 @@ export function Toggle(componentProps) {
       }
     }, elementProps, getButtonProps]
   });
-  return /*#__PURE__*/_jsx(Show, {
+  return _$createComponent(Show, {
     when: groupContext,
-    fallback: element(),
-    children: /*#__PURE__*/_jsx(CompositeItem, {
-      render: element
-    })
+    get fallback() {
+      return element();
+    },
+    get children() {
+      return _$createComponent(CompositeItem, {
+        render: element
+      });
+    }
   });
 }

package/esm/toggle-group/ToggleGroup.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createMemo, Show } from 'solid-js';
 import { CompositeRoot } from "../composite/root/CompositeRoot.js";
 import { access, splitComponentProps } from "../solid-helpers.js";
@@ -6,7 +7,6 @@ import { useControlled } from "../utils/useControlled.js";
 import { useRenderElement } from "../utils/useRenderElement.js";
 import { ToggleGroupContext } from "./ToggleGroupContext.js";
 import { ToggleGroupDataAttributes } from "./ToggleGroupDataAttributes.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   multiple(value) {
     if (access(value)) {
@@ -86,16 +86,24 @@ export function ToggleGroup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(ToggleGroupContext.Provider, {
+  return _$createComponent(ToggleGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(Show, {
-      when: toolbarContext,
-      fallback: /*#__PURE__*/_jsx(CompositeRoot, {
-        stopEventPropagation: true,
-        loop: loop(),
-        render: element
-      }),
-      children: element()
-    })
+    get children() {
+      return _$createComponent(Show, {
+        when: toolbarContext,
+        get fallback() {
+          return _$createComponent(CompositeRoot, {
+            stopEventPropagation: true,
+            get loop() {
+              return loop();
+            },
+            render: element
+          });
+        },
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/esm/toolbar/button/ToolbarButton.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -12,7 +13,6 @@ import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ToolbarButton(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'focusableWhenDisabled', 'nativeButton']);
   const disabledProp = () => local.disabled ?? false;
@@ -59,7 +59,7 @@ export function ToolbarButton(componentProps) {
       }
     }, getButtonProps]
   });
-  return /*#__PURE__*/_jsx(CompositeItem, {
+  return _$createComponent(CompositeItem, {
     metadata: itemMetadata,
     render: element
   });

package/esm/toolbar/group/ToolbarGroup.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
@@ -9,7 +10,6 @@ import { ToolbarGroupContext } from "./ToolbarGroupContext.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ToolbarGroup(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled']);
   const disabledProp = () => local.disabled ?? false;
@@ -35,8 +35,10 @@ export function ToolbarGroup(componentProps) {
       role: 'group'
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(ToolbarGroupContext.Provider, {
+  return _$createComponent(ToolbarGroupContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/toolbar/input/ToolbarInput.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { ARROW_LEFT, ARROW_RIGHT, stopEvent } from "../../composite/composite.js";
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
@@ -14,7 +15,6 @@ import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ToolbarInput(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['focusableWhenDisabled', 'disabled']);
   const focusableWhenDisabled = () => local.focusableWhenDisabled ?? true;
@@ -67,7 +67,7 @@ export function ToolbarInput(componentProps) {
       }
     }, elementProps, props => mergeProps(props, focusableWhenDisabledProps())]
   });
-  return /*#__PURE__*/_jsx(CompositeItem, {
+  return _$createComponent(CompositeItem, {
     metadata: itemMetadata,
     render: element
   });

package/esm/toolbar/link/ToolbarLink.js

@@ -1,8 +1,8 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const TOOLBAR_LINK_METADATA = {
   // links cannot be disabled, this metadata is only used for deriving `disabledIndices``
   // TODO: better name
@@ -29,7 +29,7 @@ export function ToolbarLink(componentProps) {
     state,
     props: elementProps
   });
-  return /*#__PURE__*/_jsx(CompositeItem, {
+  return _$createComponent(CompositeItem, {
     metadata: TOOLBAR_LINK_METADATA,
     render: element
   });

package/esm/toolbar/root/ToolbarRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createMemo, createSignal } from 'solid-js';
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -10,7 +11,6 @@ import { ToolbarRootContext } from "./ToolbarRootContext.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ToolbarRoot(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['cols', 'disabled', 'loop', 'orientation']);
   const cols = () => local.cols ?? 1;
@@ -52,15 +52,25 @@ export function ToolbarRoot(componentProps) {
       role: 'toolbar'
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(ToolbarRootContext.Provider, {
+  return _$createComponent(ToolbarRootContext.Provider, {
     value: toolbarRootContext,
-    children: /*#__PURE__*/_jsx(CompositeRoot, {
-      cols: cols(),
-      disabledIndices: disabledIndices(),
-      loop: loop(),
-      onMapChange: setItemArray,
-      orientation: orientation(),
-      render: element
-    })
+    get children() {
+      return _$createComponent(CompositeRoot, {
+        get cols() {
+          return cols();
+        },
+        get disabledIndices() {
+          return disabledIndices();
+        },
+        get loop() {
+          return loop();
+        },
+        onMapChange: setItemArray,
+        get orientation() {
+          return orientation();
+        },
+        render: element
+      });
+    }
   });
 }

package/esm/toolbar/separator/ToolbarSeparator.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { Separator } from "../../separator/index.js";
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
@@ -7,16 +9,20 @@ import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ToolbarSeparator(props) {
   const context = useToolbarRootContext();
   const orientation = createMemo(() => ({
     vertical: 'horizontal',
     horizontal: 'vertical'
   })[context.orientation()]);
-  return /*#__PURE__*/_jsx(Separator, {
-    orientation: orientation(),
-    ...props,
-    ref: props.ref
-  });
+  return _$createComponent(Separator, _$mergeProps({
+    get orientation() {
+      return orientation();
+    }
+  }, props, {
+    ref(r$) {
+      var _ref$ = props.ref;
+      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+    }
+  }));
 }

package/esm/tooltip/arrow/TooltipArrow.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";
@@ -9,7 +10,6 @@ import { useTooltipPositionerContext } from "../positioner/TooltipPositionerCont
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function TooltipArrow(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -45,7 +45,5 @@ export function TooltipArrow(componentProps) {
     }, elementProps],
     customStyleHookMapping: popupStateMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/tooltip/popup/TooltipPopup.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { DISABLED_TRANSITIONS_STYLE } from "../../utils/constants.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
@@ -6,7 +7,6 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.js";
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -70,7 +70,5 @@ export function TooltipPopup(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }