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

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createSignal, onCleanup, onMount } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -10,7 +11,6 @@ import { ScrollAreaScrollbarDataAttributes } from "../scrollbar/ScrollAreaScroll
 import { getOffset } from "../utils/getOffset.js";
 import { ScrollAreaRootContext } from "./ScrollAreaRootContext.js";
 import { ScrollAreaRootCssVars } from "./ScrollAreaRootCssVars.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
@@ -198,8 +198,10 @@ export function ScrollAreaRoot(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(ScrollAreaRootContext.Provider, {
+  return _$createComponent(ScrollAreaRootContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, onCleanup, Show } from 'solid-js';
 import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -13,7 +14,6 @@ import { ScrollAreaScrollbarCssVars } from "./ScrollAreaScrollbarCssVars.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ScrollAreaScrollbar(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['orientation', 'keepMounted']);
   const orientation = () => local.orientation ?? 'vertical';
@@ -165,11 +165,17 @@ export function ScrollAreaScrollbar(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/_jsx(ScrollAreaScrollbarContext.Provider, {
-      value: contextValue,
-      children: element()
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return _$createComponent(ScrollAreaScrollbarContext.Provider, {
+        value: contextValue,
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/esm/scroll-area/thumb/ScrollAreaThumb.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 { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
@@ -10,7 +11,6 @@ import { ScrollAreaScrollbarCssVars } from "../scrollbar/ScrollAreaScrollbarCssV
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function ScrollAreaThumb(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const rootContext = useScrollAreaRootContext();
@@ -53,7 +53,5 @@ export function ScrollAreaThumb(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/scroll-area/viewport/ScrollAreaViewport.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, on, onCleanup, onMount } from 'solid-js';
 import { produce } from 'solid-js/store';
 import { useDirection } from "../../direction-provider/DirectionContext.js";
@@ -18,7 +19,6 @@ import { ScrollAreaViewportContext } from "./ScrollAreaViewportContext.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function ScrollAreaViewport(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   let viewportEl;
@@ -189,8 +189,10 @@ export function ScrollAreaViewport(componentProps) {
       onKeyDown: handleUserInteraction
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(ScrollAreaViewportContext.Provider, {
+  return _$createComponent(ScrollAreaViewportContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/select/arrow/SelectArrow.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { Show } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
@@ -5,7 +6,6 @@ import { transitionStatusMapping } from "../../utils/styleHookMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -55,8 +55,12 @@ export function SelectArrow(componentProps) {
     }, elementProps],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: alignItemWithTriggerActive() === false,
-    children: element()
+  return _$createComponent(Show, {
+    get when() {
+      return alignItemWithTriggerActive() === false;
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/esm/select/backdrop/SelectBackdrop.js

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

package/esm/select/group/SelectGroup.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createSignal } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -9,7 +10,6 @@ import { SelectGroupContext } from "./SelectGroupContext.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function SelectGroup(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const [labelId, setLabelId] = createSignal();
@@ -25,8 +25,10 @@ export function SelectGroup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(SelectGroupContext.Provider, {
+  return _$createComponent(SelectGroupContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/select/group-label/SelectGroupLabel.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createRenderEffect } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -10,7 +11,6 @@ import { useSelectGroupContext } from "../group/SelectGroupContext.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SelectGroupLabel(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
   const {
@@ -27,7 +27,5 @@ export function SelectGroupLabel(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/select/icon/SelectIcon.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";
 
@@ -7,7 +8,6 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SelectIcon(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const element = useRenderElement('span', componentProps, {
@@ -15,12 +15,8 @@ export function SelectIcon(componentProps) {
       'aria-hidden': true
     }, elementProps],
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: componentProps.children ?? '▼'
-      });
+      return _$memo(() => componentProps.children ?? '▼');
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/select/item/SelectItem.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createEffect, createMemo, onCleanup } from 'solid-js';
 import { IndexGuessBehavior, useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
 import { mergeProps } from "../../merge-props/mergeProps.js";
@@ -14,7 +15,6 @@ import { SelectItemContext } from "./SelectItemContext.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function SelectItem(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['value', 'label', 'disabled', 'nativeButton']);
   const value = () => local.value ?? null;
@@ -195,8 +195,10 @@ export function SelectItem(componentProps) {
     },
     props: [props => mergeProps(props, rootProps()), defaultProps, elementProps, getButtonProps]
   });
-  return /*#__PURE__*/_jsx(SelectItemContext.Provider, {
+  return _$createComponent(SelectItemContext.Provider, {
     value: contextValue,
-    children: element()
+    get children() {
+      return element();
+    }
   });
 }

package/esm/select/item-indicator/SelectItemIndicator.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { Show } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { transitionStatusMapping } from "../../utils/styleHookMapping.js";
@@ -12,7 +13,6 @@ import { useSelectItemContext } from "../item/SelectItemContext.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function SelectItemIndicator(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['keepMounted']);
   const keepMounted = () => local.keepMounted ?? false;
@@ -57,8 +57,12 @@ export function SelectItemIndicator(componentProps) {
     }, elementProps],
     children: () => componentProps.children ?? '✔️'
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: element()
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/esm/select/item-text/SelectItemText.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, on } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -10,7 +11,6 @@ import { useSelectRootContext } from "../root/SelectRootContext.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SelectItemText(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   let ref = null;
@@ -34,7 +34,5 @@ export function SelectItemText(componentProps) {
     },
     props: elementProps
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/select/popup/SelectPopup.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 { FloatingFocusManager } from "../../floating-ui-solid/index.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -13,7 +15,6 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { clearPositionerStyles } from "./utils.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
@@ -309,13 +310,15 @@ export function SelectPopup(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [styleDisableScrollbar.element, /*#__PURE__*/_jsx(FloatingFocusManager, {
-      context: context,
-      modal: false,
-      disabled: !store.mounted,
-      restoreFocus: true,
-      children: element()
-    })]
-  });
+  return [_$memo(() => styleDisableScrollbar.element), _$createComponent(FloatingFocusManager, {
+    context: context,
+    modal: false,
+    get disabled() {
+      return !store.mounted;
+    },
+    restoreFocus: true,
+    get children() {
+      return element();
+    }
+  })];
 }

package/esm/select/portal/SelectPortal.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 { useSelectRootContext } from "../root/SelectRootContext.js";
@@ -9,20 +10,29 @@ import { SelectPortalContext } from "./SelectPortalContext.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function SelectPortal(props) {
   const {
     store
   } = useSelectRootContext();
   const shouldRender = () => store.mounted || store.forceMount;
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: /*#__PURE__*/_jsx(SelectPortalContext.Provider, {
-      value: true,
-      children: /*#__PURE__*/_jsx(FloatingPortal, {
-        root: props.container,
-        children: props.children
-      })
-    })
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return _$createComponent(SelectPortalContext.Provider, {
+        value: true,
+        get children() {
+          return _$createComponent(FloatingPortal, {
+            get root() {
+              return props.container;
+            },
+            get children() {
+              return props.children;
+            }
+          });
+        }
+      });
+    }
   });
 }

package/esm/select/positioner/SelectPositioner.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, createSignal, mergeProps as solidMergeProps } from 'solid-js';
 import { produce } from 'solid-js/store';
 import { CompositeList } from "../../composite/list/CompositeList.js";
@@ -12,7 +14,6 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { clearPositionerStyles } from "../popup/utils.js";
 import { useSelectFloatingContext, useSelectRootContext } from "../root/SelectRootContext.js";
 import { SelectPositionerContext } from "./SelectPositionerContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FIXED = {
   position: 'fixed'
 };
@@ -154,19 +155,29 @@ export function SelectPositioner(componentProps) {
     customStyleHookMapping: popupStateMapping,
     props: [defaultProps, elementProps]
   });
-  return /*#__PURE__*/_jsx(CompositeList, {
-    refs: {
-      elements: refs.listRef,
-      labels: refs.labelsRef
+  return _$createComponent(CompositeList, {
+    get refs() {
+      return {
+        elements: refs.listRef,
+        labels: refs.labelsRef
+      };
     },
     onMapChange: onMapChange,
-    children: /*#__PURE__*/_jsxs(SelectPositionerContext.Provider, {
-      value: contextValue,
-      children: [store.mounted && store.modal && /*#__PURE__*/_jsx(InternalBackdrop, {
-        managed: true,
-        inert: inertValue(!store.open),
-        cutout: store.triggerElement
-      }), element()]
-    })
+    get children() {
+      return _$createComponent(SelectPositionerContext.Provider, {
+        value: contextValue,
+        get children() {
+          return [_$memo(() => _$memo(() => !!(store.mounted && store.modal))() && _$createComponent(InternalBackdrop, {
+            managed: true,
+            get inert() {
+              return inertValue(!store.open);
+            },
+            get cutout() {
+              return store.triggerElement;
+            }
+          })), _$memo(() => element())];
+        }
+      });
+    }
   });
 }

package/esm/select/root/SelectRoot.js

@@ -1,3 +1,9 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } 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(`<input>`);
 import { createMemo } from 'solid-js';
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { visuallyHidden } from "../../utils/visuallyHidden.js";
@@ -11,7 +17,6 @@ import { useSelectRoot } from "./useSelectRoot.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SelectRoot(props) {
   const defaultValue = () => props.defaultValue ?? null;
   const defaultOpen = () => props.defaultOpen ?? false;
@@ -50,53 +55,59 @@ export function SelectRoot(props) {
     controlId
   } = useFieldRootContext();
   const serializedValue = createMemo(() => serializeValue(value()));
-  return /*#__PURE__*/_jsx(SelectRootContext.Provider, {
+  return _$createComponent(SelectRootContext.Provider, {
     value: rootContext,
-    children: /*#__PURE__*/_jsxs(SelectFloatingContext.Provider, {
-      value: floatingContext,
-      children: [props.children, /*#__PURE__*/_jsx("input", {
-        ...rootContext.fieldControlValidation.getInputValidationProps({
-          onFocus() {
-            // Move focus to the trigger element when the hidden input is focused.
-            rootContext.store.triggerElement?.focus();
-          },
-          // Handle browser autofill.
-          onInput(event) {
-            // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.defaultPrevented) {
-              return;
-            }
-            const nextValue = event.target.value;
-            rootContext.setStore('forceMount', true);
-            const resolvedValue = value();
-            queueMicrotask(() => {
-              const exactValue = rootContext.refs.valuesRef.find(v => v === nextValue || typeof resolvedValue === 'string' && nextValue.toLowerCase() === v.toLowerCase());
-              if (exactValue != null) {
-                setDirty(exactValue !== validityData.initialValue);
-                rootContext.setValue?.(exactValue, event);
-                if (validationMode() === 'onChange') {
-                  rootContext.fieldControlValidation.commitValidation(exactValue);
+    get children() {
+      return _$createComponent(SelectFloatingContext.Provider, {
+        value: floatingContext,
+        get children() {
+          return [_$memo(() => props.children), (() => {
+            var _el$ = _tmpl$();
+            _$spread(_el$, _$mergeProps(() => rootContext.fieldControlValidation.getInputValidationProps({
+              onFocus() {
+                // Move focus to the trigger element when the hidden input is focused.
+                rootContext.store.triggerElement?.focus();
+              },
+              // Handle browser autofill.
+              onInput(event) {
+                // Workaround for https://github.com/facebook/react/issues/9023
+                if (event.defaultPrevented) {
+                  return;
                 }
-              }
-            });
-          },
-          ref: el => {
-            if (props.refs) {
-              props.refs.inputRef = el;
-            }
-            rootContext.fieldControlValidation.refs.inputRef = el;
-          },
-          id: props.id || controlId() || undefined,
-          name: rootContext.name(),
-          disabled: rootContext.disabled(),
-          required: rootContext.required(),
-          readOnly: rootContext.readOnly(),
-          value: serializedValue(),
-          style: visuallyHidden,
-          tabIndex: -1,
-          'aria-hidden': true
-        })
-      })]
-    })
+                const nextValue = event.target.value;
+                rootContext.setStore('forceMount', true);
+                const resolvedValue = value();
+                queueMicrotask(() => {
+                  const exactValue = rootContext.refs.valuesRef.find(v => v === nextValue || typeof resolvedValue === 'string' && nextValue.toLowerCase() === v.toLowerCase());
+                  if (exactValue != null) {
+                    setDirty(exactValue !== validityData.initialValue);
+                    rootContext.setValue?.(exactValue, event);
+                    if (validationMode() === 'onChange') {
+                      rootContext.fieldControlValidation.commitValidation(exactValue);
+                    }
+                  }
+                });
+              },
+              ref: el => {
+                if (props.refs) {
+                  props.refs.inputRef = el;
+                }
+                rootContext.fieldControlValidation.refs.inputRef = el;
+              },
+              id: props.id || controlId() || undefined,
+              name: rootContext.name(),
+              disabled: rootContext.disabled(),
+              required: rootContext.required(),
+              readOnly: rootContext.readOnly(),
+              value: serializedValue(),
+              style: visuallyHidden,
+              tabIndex: -1,
+              'aria-hidden': true
+            })), false, false);
+            return _el$;
+          })()];
+        }
+      });
+    }
   });
 }

package/esm/select/scroll-arrow/SelectScrollArrow.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { Show } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
@@ -10,7 +12,6 @@ import { useSelectRootContext } from "../root/SelectRootContext.js";
 /**
  * @internal
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SelectScrollArrow(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['direction', 'keepMounted']);
   const keepMounted = () => componentProps.keepMounted ?? false;
@@ -60,9 +61,7 @@ export function SelectScrollArrow(componentProps) {
     },
     'aria-hidden': true,
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: local.direction === 'up' ? '▲' : '▼'
-      });
+      return _$memo(() => local.direction === 'up' ? '▲' : '▼');
     },
     style: {
       position: 'absolute'
@@ -149,8 +148,12 @@ export function SelectScrollArrow(componentProps) {
     },
     props: [defaultProps, elementProps]
   });
-  return /*#__PURE__*/_jsx(Show, {
-    when: shouldRender(),
-    children: element()
+  return _$createComponent(Show, {
+    get when() {
+      return shouldRender();
+    },
+    get children() {
+      return element();
+    }
   });
 }

package/esm/select/scroll-down-arrow/SelectScrollDownArrow.js

@@ -1,3 +1,5 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
 import { SelectScrollArrow } from "../scroll-arrow/SelectScrollArrow.js";
 
 /**
@@ -6,11 +8,12 @@ import { SelectScrollArrow } from "../scroll-arrow/SelectScrollArrow.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function SelectScrollDownArrow(props) {
-  return /*#__PURE__*/_jsx(SelectScrollArrow, {
-    ...props,
-    ref: props.ref,
+  return _$createComponent(SelectScrollArrow, _$mergeProps(props, {
+    ref(r$) {
+      var _ref$ = props.ref;
+      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+    },
     direction: "down"
-  });
+  }));
 }