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

package/esm/select/scroll-up-arrow/SelectScrollUpArrow.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 SelectScrollUpArrow(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: "up"
-  });
+  }));
 }

package/esm/select/trigger/SelectTrigger.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { batch, createEffect, onCleanup, mergeProps as solidMergeProps } from 'solid-js';
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { fieldValidityMapping } from "../../field/utils/constants.js";
@@ -11,7 +12,6 @@ import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useTimeout } from "../../utils/useTimeout.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const BOUNDARY_OFFSET = 2;
 const customStyleHookMapping = {
   ...pressableTriggerOpenStateMapping,
@@ -194,7 +194,5 @@ export function SelectTrigger(componentProps) {
     }],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/select/value/SelectValue.js

@@ -1,8 +1,8 @@
+import { memo as _$memo } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.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 = {
   value: () => null
 };
@@ -41,12 +41,8 @@ export function SelectValue(componentProps) {
     props: elementProps,
     customStyleHookMapping,
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: typeof componentProps.children === 'function' ? componentProps.children?.(store.value) : componentProps.children ?? labelFromItems() ?? store.value
-      });
+      return _$memo(() => _$memo(() => typeof componentProps.children === 'function')() ? componentProps.children?.(store.value) : componentProps.children ?? labelFromItems() ?? store.value);
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/separator/Separator.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 Separator](https://base-ui.com/react/components/separator)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function Separator(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['orientation']);
   const orientation = () => local.orientation ?? 'horizontal';
@@ -25,7 +25,5 @@ export function Separator(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/slider/control/SliderControl.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, onCleanup } from 'solid-js';
 import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { activeElement } from "../../floating-ui-solid/utils.js";
@@ -11,7 +12,6 @@ import { sliderStyleHookMapping } from "../root/styleHooks.js";
 import { replaceArrayItemAtIndex } from "../utils/replaceArrayItemAtIndex.js";
 import { roundValueToStep } from "../utils/roundValueToStep.js";
 import { validateMinimumDistance } from "../utils/validateMinimumDistance.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 function getClosestThumbIndex(values, currentValue, max) {
   let closestIndex;
@@ -329,7 +329,5 @@ export function SliderControl(componentProps) {
       }
     }, elementProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/slider/indicator/SliderIndicator.js

@@ -1,10 +1,10 @@
+import { memo as _$memo } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStyleHookMapping } from "../root/styleHooks.js";
 import { valueArrayToPercentages } from "../utils/valueArrayToPercentages.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 function getRangeStyles(orientation, offset, leap) {
   if (orientation === 'vertical') {
     return {
@@ -69,7 +69,5 @@ export function SliderIndicator(componentProps) {
     }, elementProps],
     customStyleHookMapping: sliderStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/slider/root/SliderRoot.js

@@ -1,3 +1,10 @@
+import { template as _$template } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<input>`);
 import { createEffect, createMemo, createSignal, For, onMount, Show, mergeProps as solidMergeProps } from 'solid-js';
 import { CompositeList } from "../../composite/list/CompositeList.js";
 import { useFieldControlValidation } from "../../field/control/useFieldControlValidation.js";
@@ -19,7 +26,6 @@ import { getSliderValue } from "../utils/getSliderValue.js";
 import { validateMinimumDistance } from "../utils/validateMinimumDistance.js";
 import { SliderRootContext } from "./SliderRootContext.js";
 import { sliderStyleHookMapping } from "./styleHooks.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function areValuesEqual(newValue, oldValue) {
   if (typeof newValue === 'number' && typeof oldValue === 'number') {
     return newValue === oldValue;
@@ -254,53 +260,71 @@ export function SliderRoot(componentProps) {
       }
     }, fieldControlValidation.getValidationProps, elementProps]
   });
-  return /*#__PURE__*/_jsx(SliderRootContext.Provider, {
+  return _$createComponent(SliderRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsxs(CompositeList, {
-      refs: {
-        elements: refs.thumbRefs
-      },
-      onMapChange: setThumbArray,
-      children: [element(), /*#__PURE__*/_jsx(Show, {
-        when: range(),
-        fallback: /*#__PURE__*/_jsx("input", {
-          ref: el => {
-            if (local.refs) {
-              local.refs.inputRef = el;
-            }
-            fieldControlValidation.refs.inputRef = el;
-          },
-          ...fieldControlValidation.getInputValidationProps({
-            disabled,
-            name: name(),
-            value: valueUnwrapped,
-            onFocus: handleHiddenInputFocus,
-            style: visuallyHidden,
-            tabIndex: -1,
-            'aria-hidden': true
-          })
-        }),
-        children: /*#__PURE__*/_jsx(For, {
-          each: values(),
-          children: value => /*#__PURE__*/_jsx("input", {
-            ref: el => {
-              if (local.refs) {
-                local.refs.inputRef = el;
-              }
-              fieldControlValidation.refs.inputRef = el;
+    get children() {
+      return _$createComponent(CompositeList, {
+        get refs() {
+          return {
+            elements: refs.thumbRefs
+          };
+        },
+        onMapChange: setThumbArray,
+        get children() {
+          return [_$memo(() => element()), _$createComponent(Show, {
+            get when() {
+              return range();
+            },
+            get fallback() {
+              return (() => {
+                var _el$ = _tmpl$();
+                _$use(el => {
+                  if (local.refs) {
+                    local.refs.inputRef = el;
+                  }
+                  fieldControlValidation.refs.inputRef = el;
+                }, _el$);
+                _$spread(_el$, _$mergeProps(() => fieldControlValidation.getInputValidationProps({
+                  disabled,
+                  name: name(),
+                  value: valueUnwrapped,
+                  onFocus: handleHiddenInputFocus,
+                  style: visuallyHidden,
+                  tabIndex: -1,
+                  'aria-hidden': true
+                })), false, false);
+                return _el$;
+              })();
             },
-            ...fieldControlValidation.getInputValidationProps({
-              disabled: disabled(),
-              name: name(),
-              value,
-              onFocus: handleHiddenInputFocus,
-              style: visuallyHidden,
-              tabIndex: -1,
-              'aria-hidden': true
-            })
-          })
-        })
-      })]
-    })
+            get children() {
+              return _$createComponent(For, {
+                get each() {
+                  return values();
+                },
+                children: value => (() => {
+                  var _el$2 = _tmpl$();
+                  _$use(el => {
+                    if (local.refs) {
+                      local.refs.inputRef = el;
+                    }
+                    fieldControlValidation.refs.inputRef = el;
+                  }, _el$2);
+                  _$spread(_el$2, _$mergeProps(() => fieldControlValidation.getInputValidationProps({
+                    disabled: disabled(),
+                    name: name(),
+                    value,
+                    onFocus: handleHiddenInputFocus,
+                    style: visuallyHidden,
+                    tabIndex: -1,
+                    'aria-hidden': true
+                  })), false, false);
+                  return _el$2;
+                })()
+              });
+            }
+          })];
+        }
+      });
+    }
   });
 }

package/esm/slider/thumb/SliderThumb.js

@@ -1,3 +1,7 @@
+import { template as _$template } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<input>`);
 import { batch, createMemo } from 'solid-js';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, COMPOSITE_KEYS, END, HOME } from "../../composite/composite.js";
 import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
@@ -16,7 +20,6 @@ import { getSliderValue } from "../utils/getSliderValue.js";
 import { roundValueToStep } from "../utils/roundValueToStep.js";
 import { valueArrayToPercentages } from "../utils/valueArrayToPercentages.js";
 import { SliderThumbDataAttributes } from "./SliderThumbDataAttributes.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const PAGE_UP = 'PageUp';
 const PAGE_DOWN = 'PageDown';
 const ALL_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END, PAGE_UP, PAGE_DOWN]);
@@ -279,16 +282,12 @@ export function SliderThumb(componentProps) {
     },
     props: thumbProps,
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: componentProps.render == null ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [thumbProps.children ?? componentProps.children, /*#__PURE__*/_jsx("input", {
-            ...inputProps
-          })]
-        }) : undefined
-      });
+      return _$memo(() => _$memo(() => componentProps.render == null)() ? [_$memo(() => thumbProps.children ?? componentProps.children), (() => {
+        var _el$ = _tmpl$();
+        _$spread(_el$, inputProps, false, false);
+        return _el$;
+      })()] : undefined);
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/slider/track/SliderTrack.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 { useSliderRootContext } from "../root/SliderRootContext.js";
@@ -9,7 +10,6 @@ import { sliderStyleHookMapping } from "../root/styleHooks.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SliderTrack(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -24,7 +24,5 @@ export function SliderTrack(componentProps) {
     }, elementProps],
     customStyleHookMapping: sliderStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/slider/value/SliderValue.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { splitComponentProps } from "../../solid-helpers.js";
 import { formatNumber } from "../../utils/formatNumber.js";
@@ -11,7 +12,6 @@ import { sliderStyleHookMapping } from "../root/styleHooks.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SliderValue(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['aria-live', 'children']);
   const {
@@ -58,12 +58,8 @@ export function SliderValue(componentProps) {
       }
     }, elementProps],
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: componentProps.children?.(formattedValues(), values()) ?? defaultDisplayValue()
-      });
+      return _$memo(() => componentProps.children?.(formattedValues(), values()) ?? defaultDisplayValue());
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/switch/root/SwitchRoot.js

@@ -1,3 +1,11 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<input>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<input type=hidden value=off>`);
 import { batch, createSignal, onMount, mergeProps as solidMergeProps } from 'solid-js';
 import { useFieldControlValidation } from "../../field/control/useFieldControlValidation.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
@@ -18,7 +26,6 @@ import { SwitchRootContext } from "./SwitchRootContext.js";
  *
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SwitchRoot(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['checked', 'defaultChecked', 'id', 'refs', 'nativeButton', 'onCheckedChange', 'readOnly', 'required', 'disabled']);
   const nativeButton = () => local.nativeButton ?? true;
@@ -204,14 +211,18 @@ export function SwitchRoot(componentProps) {
     props: [rootProps, getValidationProps, elementProps, getButtonProps],
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsxs(SwitchRootContext.Provider, {
+  return _$createComponent(SwitchRootContext.Provider, {
     value: context,
-    children: [element(), !checked() && elementProps.name && /*#__PURE__*/_jsx("input", {
-      type: "hidden",
-      name: elementProps.name,
-      value: "off"
-    }), /*#__PURE__*/_jsx("input", {
-      ...inputProps
-    })]
+    get children() {
+      return [_$memo(() => element()), _$memo(() => _$memo(() => !!(!checked() && elementProps.name))() && (() => {
+        var _el$2 = _tmpl$2();
+        _$effect(() => _$setAttribute(_el$2, "name", elementProps.name));
+        return _el$2;
+      })()), (() => {
+        var _el$ = _tmpl$();
+        _$spread(_el$, inputProps, false, false);
+        return _el$;
+      })()];
+    }
   });
 }

package/esm/switch/thumb/SwitchThumb.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { mergeProps as solidMergeProps } from 'solid-js';
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -11,7 +12,6 @@ import { styleHookMapping } from "../styleHooks.js";
  *
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function SwitchThumb(componentProps) {
   const [,, elementProps] = splitComponentProps(componentProps, []);
   const {
@@ -37,7 +37,5 @@ export function SwitchThumb(componentProps) {
     props: elementProps,
     customStyleHookMapping: styleHookMapping
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/tabs/indicator/TabsIndicator.js

@@ -1,4 +1,7 @@
-var _script;
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<script suppresshydrationwarnings>`);
 import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js';
 import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -9,7 +12,6 @@ import { tabsStyleHookMapping } from "../root/styleHooks.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { script as prehydrationScript } from "./prehydrationScript.min.js";
 import { TabsIndicatorCssVars } from "./TabsIndicatorCssVars.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const customStyleHookMapping = {
   ...tabsStyleHookMapping,
   selectedTabPosition: () => null,
@@ -139,14 +141,16 @@ export function TabsIndicator(componentProps) {
     }],
     customStyleHookMapping
   });
-  return /*#__PURE__*/_jsxs(Show, {
-    when: activeTabValue() != null,
-    children: [element(), !isMounted() && renderBeforeHydration() && (_script || (_script = /*#__PURE__*/_jsx("script", {
-      // eslint-disable-next-line solid/no-innerhtml
-      innerHTML: prehydrationScript
-      // @ts-expect-error - suppressHydrationWarnings is not a valid attribute for Solid
-      ,
-      suppressHydrationWarnings: true
-    })))]
+  return _$createComponent(Show, {
+    get when() {
+      return activeTabValue() != null;
+    },
+    get children() {
+      return [_$memo(() => element()), _$memo(() => _$memo(() => !!(!isMounted() && renderBeforeHydration()))() && (() => {
+        var _el$ = _tmpl$();
+        _el$.innerHTML = prehydrationScript;
+        return _el$;
+      })())];
+    }
   });
 }

package/esm/tabs/list/TabsList.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createEffect, createSignal } from 'solid-js';
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -5,7 +6,6 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { tabsStyleHookMapping } from "../root/styleHooks.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { TabsListContext } from "./TabsListContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_ARRAY = [];
 
 /**
@@ -68,18 +68,26 @@ export function TabsList(componentProps) {
     }, elementProps],
     customStyleHookMapping: tabsStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(TabsListContext.Provider, {
+  return _$createComponent(TabsListContext.Provider, {
     value: tabsListContextValue,
-    children: /*#__PURE__*/_jsx(CompositeRoot, {
-      highlightedIndex: highlightedTabIndex(),
-      enableHomeAndEndKeys: true,
-      loop: loop(),
-      orientation: orientation(),
-      onHighlightedIndexChange: setHighlightedTabIndex,
-      onMapChange: setTabArray,
-      disabledIndices: EMPTY_ARRAY,
-      render: element
-    })
+    get children() {
+      return _$createComponent(CompositeRoot, {
+        get highlightedIndex() {
+          return highlightedTabIndex();
+        },
+        enableHomeAndEndKeys: true,
+        get loop() {
+          return loop();
+        },
+        get orientation() {
+          return orientation();
+        },
+        onHighlightedIndexChange: setHighlightedTabIndex,
+        onMapChange: setTabArray,
+        disabledIndices: EMPTY_ARRAY,
+        render: element
+      });
+    }
   });
 }
 function getInset(tab, tabsList) {

package/esm/tabs/panel/TabsPanel.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createMemo } from 'solid-js';
 import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
 import { splitComponentProps } from "../../solid-helpers.js";
@@ -13,7 +14,6 @@ import { TabsPanelDataAttributes } from "./TabsPanelDataAttributes.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function TabsPanel(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['value', 'keepMounted', 'children']);
   const keepMounted = () => local.keepMounted ?? false;
@@ -73,12 +73,8 @@ export function TabsPanel(componentProps) {
     }, elementProps],
     customStyleHookMapping: tabsStyleHookMapping,
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: hidden() && !keepMounted() ? undefined : componentProps.children
-      });
+      return _$memo(() => _$memo(() => !!(hidden() && !keepMounted()))() ? undefined : componentProps.children);
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/tabs/root/TabsRoot.js

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { batch, createSignal } from 'solid-js';
 import { CompositeList } from "../../composite/list/CompositeList.js";
 import { useDirection } from "../../direction-provider/DirectionContext.js";
@@ -13,7 +14,6 @@ import { tabsStyleHookMapping } from "./styleHooks.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function TabsRoot(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['defaultValue', 'onValueChange', 'orientation', 'value']);
   const orientation = () => local.orientation ?? 'horizontal';
@@ -117,14 +117,18 @@ export function TabsRoot(componentProps) {
     props: elementProps,
     customStyleHookMapping: tabsStyleHookMapping
   });
-  return /*#__PURE__*/_jsx(TabsRootContext.Provider, {
+  return _$createComponent(TabsRootContext.Provider, {
     value: tabsContextValue,
-    children: /*#__PURE__*/_jsx(CompositeList, {
-      refs: {
-        elements: tabPanelRefs
-      },
-      onMapChange: setTabPanelArray,
-      children: element()
-    })
+    get children() {
+      return _$createComponent(CompositeList, {
+        refs: {
+          elements: tabPanelRefs
+        },
+        onMapChange: setTabPanelArray,
+        get children() {
+          return element();
+        }
+      });
+    }
   });
 }

package/esm/tabs/tab/TabsTab.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { createEffect, createMemo } from 'solid-js';
 import { ACTIVE_COMPOSITE_ITEM } from "../../composite/constants.js";
 import { useCompositeItem } from "../../composite/item/useCompositeItem.js";
@@ -15,7 +16,6 @@ import { useTabsRootContext } from "../root/TabsRootContext.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 export function TabsTab(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'value', 'id', 'nativeButton']);
   const disabled = () => local.disabled ?? false;
@@ -162,7 +162,5 @@ export function TabsTab(componentProps) {
       }
     }, elementProps, getButtonProps, compositeItemProps]
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }

package/esm/toast/action/ToastAction.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "solid-js/web";
 import { mergeProps } from "../../merge-props/index.js";
 import { splitComponentProps } from "../../solid-helpers.js";
 import { useButton } from "../../use-button/useButton.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 ToastAction(componentProps) {
   const [, local, elementProps] = splitComponentProps(componentProps, ['disabled', 'nativeButton']);
   const nativeButton = () => local.nativeButton ?? true;
@@ -35,12 +35,8 @@ export function ToastAction(componentProps) {
     ref: buttonRef,
     props: [elementProps, props => mergeProps(props, toast().actionProps), getButtonProps],
     get children() {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: toast().actionProps?.children ?? componentProps.children
-      });
+      return _$memo(() => toast().actionProps?.children ?? componentProps.children);
     }
   });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: element()
-  });
+  return _$memo(element);
 }