@huin-core/react-select 1.0.4 → 1.0.7

package/dist/index.js

@@ -64,7 +64,6 @@ var import_react_popper = require("@huin-core/react-popper");
 var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
 var import_react_use_previous = require("@huin-core/react-use-previous");
 var import_react_visually_hidden = require("@huin-core/react-visually-hidden");
-var import_jsx_runtime = require("react/jsx-runtime");
 var SELECT_NAME = "Select";
 var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(SELECT_NAME);
 var [createSelectContext, createSelectScope] = (0, import_react_context.createContextScope)(
@@ -115,7 +114,7 @@ var Select = (props) => {
     /* @__PURE__ */ new Set()
   );
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ React.createElement(PopperPrimitive.Root, { ...popperScope }, /* @__PURE__ */ React.createElement(
     SelectProvider,
     {
       required,
@@ -133,46 +132,42 @@ var Select = (props) => {
       onOpenChange: setOpen,
       dir: direction,
       triggerPointerDownPosRef,
-      disabled,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          SelectNativeOptionsProvider,
-          {
-            scope: props.__scopeSelect,
-            onNativeOptionAdd: React.useCallback((option) => {
-              setNativeOptionsSet((prev) => new Set(prev).add(option));
-            }, []),
-            onNativeOptionRemove: React.useCallback((option) => {
-              setNativeOptionsSet((prev) => {
-                const optionsSet = new Set(prev);
-                optionsSet.delete(option);
-                return optionsSet;
-              });
-            }, []),
-            children
-          }
-        ) }),
-        isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          BubbleSelect,
-          {
-            "aria-hidden": true,
-            required,
-            tabIndex: -1,
-            name,
-            autoComplete,
-            value,
-            onChange: (event) => setValue(event.target.value),
-            disabled,
-            children: [
-              value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "" }) : null,
-              Array.from(nativeOptionsSet)
-            ]
-          },
-          nativeSelectKey
-        ) : null
-      ]
-    }
-  ) });
+      disabled
+    },
+    /* @__PURE__ */ React.createElement(Collection.Provider, { scope: __scopeSelect }, /* @__PURE__ */ React.createElement(
+      SelectNativeOptionsProvider,
+      {
+        scope: props.__scopeSelect,
+        onNativeOptionAdd: React.useCallback((option) => {
+          setNativeOptionsSet((prev) => new Set(prev).add(option));
+        }, []),
+        onNativeOptionRemove: React.useCallback((option) => {
+          setNativeOptionsSet((prev) => {
+            const optionsSet = new Set(prev);
+            optionsSet.delete(option);
+            return optionsSet;
+          });
+        }, [])
+      },
+      children
+    )),
+    isFormControl ? /* @__PURE__ */ React.createElement(
+      BubbleSelect,
+      {
+        key: nativeSelectKey,
+        "aria-hidden": true,
+        required,
+        tabIndex: -1,
+        name,
+        autoComplete,
+        value,
+        onChange: (event) => setValue(event.target.value),
+        disabled
+      },
+      value === void 0 ? /* @__PURE__ */ React.createElement("option", { value: "" }) : null,
+      Array.from(nativeOptionsSet)
+    ) : null
+  ));
 };
 Select.displayName = SELECT_NAME;
 var BubbleSelect = React.forwardRef((props, forwardedRef) => {
@@ -194,7 +189,7 @@ var BubbleSelect = React.forwardRef((props, forwardedRef) => {
       select.dispatchEvent(event);
     }
   }, [prevValue, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_visually_hidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
+  return /* @__PURE__ */ React.createElement(import_react_visually_hidden.VisuallyHidden, { asChild: true }, /* @__PURE__ */ React.createElement("select", { ...selectProps, ref: composedRefs, defaultValue: value }));
 });
 BubbleSelect.displayName = "BubbleSelect";
 var Root2 = Select;
@@ -215,7 +210,6 @@ var import_react = __toESM(require("react"));
 var import_react_primitive = require("@huin-core/react-primitive");
 var import_react_compose_refs2 = require("@huin-core/react-compose-refs");
 var import_primitive = require("@huin-core/primitive");
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var CONTENT_NAME = "SelectContent";
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME, {});
 var VIEWPORT_NAME = "SelectViewport";
@@ -231,64 +225,61 @@ var SelectViewport = import_react.default.forwardRef((props, forwardedRef) => {
     contentContext.onViewportChange
   );
   const prevScrollTopRef = import_react.default.useRef(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "style",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `[data-huin-core-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-huin-core-select-viewport]::-webkit-scrollbar{display:none}`
-        },
-        nonce
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_primitive.Primitive.div,
-      {
-        "data-huin-core-select-viewport": "",
-        role: "presentation",
-        ...viewportProps,
-        ref: composedRefs,
-        style: {
-          // we use position: 'relative' here on the `viewport` so that when we call
-          // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
-          // (independent of the scrollUpButton).
-          position: "relative",
-          flex: 1,
-          overflow: "auto",
-          ...viewportProps.style
-        },
-        onScroll: (0, import_primitive.composeEventHandlers)(viewportProps.onScroll, (event) => {
-          const viewport = event.currentTarget;
-          const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
-          if (shouldExpandOnScrollRef?.current && contentWrapper) {
-            const scrolledBy = Math.abs(
-              prevScrollTopRef.current - viewport.scrollTop
-            );
-            if (scrolledBy > 0) {
-              const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
-              const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
-              const cssHeight = parseFloat(contentWrapper.style.height);
-              const prevHeight = Math.max(cssMinHeight, cssHeight);
-              if (prevHeight < availableHeight) {
-                const nextHeight = prevHeight + scrolledBy;
-                const clampedNextHeight = Math.min(
-                  availableHeight,
-                  nextHeight
-                );
-                const heightDiff = nextHeight - clampedNextHeight;
-                contentWrapper.style.height = clampedNextHeight + "px";
-                if (contentWrapper.style.bottom === "0px") {
-                  viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
-                  contentWrapper.style.justifyContent = "flex-end";
-                }
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `[data-huin-core-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-huin-core-select-viewport]::-webkit-scrollbar{display:none}`
+      },
+      nonce
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(Collection.Slot, { scope: __scopeSelect }, /* @__PURE__ */ import_react.default.createElement(
+    import_react_primitive.Primitive.div,
+    {
+      "data-huin-core-select-viewport": "",
+      role: "presentation",
+      ...viewportProps,
+      ref: composedRefs,
+      style: {
+        // we use position: 'relative' here on the `viewport` so that when we call
+        // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
+        // (independent of the scrollUpButton).
+        position: "relative",
+        flex: 1,
+        overflow: "auto",
+        ...viewportProps.style
+      },
+      onScroll: (0, import_primitive.composeEventHandlers)(viewportProps.onScroll, (event) => {
+        const viewport = event.currentTarget;
+        const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
+        if (shouldExpandOnScrollRef?.current && contentWrapper) {
+          const scrolledBy = Math.abs(
+            prevScrollTopRef.current - viewport.scrollTop
+          );
+          if (scrolledBy > 0) {
+            const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
+            const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
+            const cssHeight = parseFloat(contentWrapper.style.height);
+            const prevHeight = Math.max(cssMinHeight, cssHeight);
+            if (prevHeight < availableHeight) {
+              const nextHeight = prevHeight + scrolledBy;
+              const clampedNextHeight = Math.min(
+                availableHeight,
+                nextHeight
+              );
+              const heightDiff = nextHeight - clampedNextHeight;
+              contentWrapper.style.height = clampedNextHeight + "px";
+              if (contentWrapper.style.bottom === "0px") {
+                viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
+                contentWrapper.style.justifyContent = "flex-end";
               }
             }
           }
-          prevScrollTopRef.current = viewport.scrollTop;
-        })
-      }
-    ) })
-  ] });
+        }
+        prevScrollTopRef.current = viewport.scrollTop;
+      })
+    }
+  )));
 });
 SelectViewport.displayName = VIEWPORT_NAME;
 
@@ -304,7 +295,6 @@ var import_primitive2 = require("@huin-core/primitive");
 var import_number = require("@huin-core/number");
 var PopperPrimitive2 = __toESM(require("@huin-core/react-popper"));
 var import_react_use_callback_ref = require("@huin-core/react-use-callback-ref");
-var import_jsx_runtime3 = require("react/jsx-runtime");
 var CONTENT_NAME2 = "SelectContent";
 var SelectContent = import_react2.default.forwardRef(
   (props, forwardedRef) => {
@@ -316,11 +306,11 @@ var SelectContent = import_react2.default.forwardRef(
     if (!context.open) {
       const frag = fragment;
       return frag ? import_react_dom.default.createPortal(
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: props.children }) }) }),
+        /* @__PURE__ */ import_react2.default.createElement(SelectContentProvider, { scope: props.__scopeSelect }, /* @__PURE__ */ import_react2.default.createElement(Collection.Slot, { scope: props.__scopeSelect }, /* @__PURE__ */ import_react2.default.createElement("div", null, props.children))),
         frag
       ) : null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectContentImpl, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ import_react2.default.createElement(SelectContentImpl, { ...props, ref: forwardedRef });
   }
 );
 SelectContent.displayName = CONTENT_NAME2;
@@ -491,7 +481,7 @@ var SelectContentImpl = import_react2.default.forwardRef((props, forwardedRef) =
     hideWhenDetached,
     avoidCollisions
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ import_react2.default.createElement(
     SelectContentProvider,
     {
       scope: __scopeSelect,
@@ -506,81 +496,81 @@ var SelectContentImpl = import_react2.default.forwardRef((props, forwardedRef) =
       selectedItemText,
       position,
       isPositioned,
-      searchRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_remove_scroll.RemoveScroll, { as: import_react_slot.Slot, allowPinchZoom: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_focus_scope.FocusScope,
+      searchRef
+    },
+    /* @__PURE__ */ import_react2.default.createElement(import_react_remove_scroll.RemoveScroll, { as: import_react_slot.Slot, allowPinchZoom: true }, /* @__PURE__ */ import_react2.default.createElement(
+      import_react_focus_scope.FocusScope,
+      {
+        asChild: true,
+        trapped: context.open,
+        onMountAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        onUnmountAutoFocus: (0, import_primitive2.composeEventHandlers)(
+          onCloseAutoFocus,
+          (event) => {
+            context.trigger?.focus({ preventScroll: true });
+            event.preventDefault();
+          }
+        )
+      },
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_react_dismissable_layer.DismissableLayer,
         {
           asChild: true,
-          trapped: context.open,
-          onMountAutoFocus: (event) => {
-            event.preventDefault();
-          },
-          onUnmountAutoFocus: (0, import_primitive2.composeEventHandlers)(
-            onCloseAutoFocus,
-            (event) => {
-              context.trigger?.focus({ preventScroll: true });
-              event.preventDefault();
-            }
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react_dismissable_layer.DismissableLayer,
-            {
-              asChild: true,
-              disableOutsidePointerEvents: true,
-              onEscapeKeyDown,
-              onPointerDownOutside,
-              onFocusOutside: (event) => event.preventDefault(),
-              onDismiss: () => context.onOpenChange(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                SelectPosition,
-                {
-                  role: "listbox",
-                  id: context.contentId,
-                  "data-state": context.open ? "open" : "closed",
-                  dir: context.dir,
-                  onContextMenu: (event) => event.preventDefault(),
-                  ...contentProps,
-                  ...popperContentProps,
-                  onPlaced: () => setIsPositioned(true),
-                  ref: composedRefs,
-                  style: {
-                    // flex layout so we can place the scroll buttons properly
-                    display: "flex",
-                    flexDirection: "column",
-                    // reset the outline by default as the content MAY get focused
-                    outline: "none",
-                    ...contentProps.style
-                  },
-                  onKeyDown: (0, import_primitive2.composeEventHandlers)(
-                    contentProps.onKeyDown,
-                    (event) => {
-                      const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-                      if (event.key === "Tab") event.preventDefault();
-                      if (!isModifierKey && event.key.length === 1)
-                        handleTypeaheadSearch(event.key);
-                      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
-                        const items = getItems().filter((item) => !item.disabled);
-                        let candidateNodes = items.map((item) => item.ref.current);
-                        if (["ArrowUp", "End"].includes(event.key)) {
-                          candidateNodes = candidateNodes.slice().reverse();
-                        }
-                        if (["ArrowUp", "ArrowDown"].includes(event.key)) {
-                          const currentElement = event.target;
-                          const currentIndex = candidateNodes.indexOf(currentElement);
-                          candidateNodes = candidateNodes.slice(currentIndex + 1);
-                        }
-                        setTimeout(() => focusFirst(candidateNodes));
-                        event.preventDefault();
-                      }
-                    }
-                  )
+          disableOutsidePointerEvents: true,
+          onEscapeKeyDown,
+          onPointerDownOutside,
+          onFocusOutside: (event) => event.preventDefault(),
+          onDismiss: () => context.onOpenChange(false)
+        },
+        /* @__PURE__ */ import_react2.default.createElement(
+          SelectPosition,
+          {
+            role: "listbox",
+            id: context.contentId,
+            "data-state": context.open ? "open" : "closed",
+            dir: context.dir,
+            onContextMenu: (event) => event.preventDefault(),
+            ...contentProps,
+            ...popperContentProps,
+            onPlaced: () => setIsPositioned(true),
+            ref: composedRefs,
+            style: {
+              // flex layout so we can place the scroll buttons properly
+              display: "flex",
+              flexDirection: "column",
+              // reset the outline by default as the content MAY get focused
+              outline: "none",
+              ...contentProps.style
+            },
+            onKeyDown: (0, import_primitive2.composeEventHandlers)(
+              contentProps.onKeyDown,
+              (event) => {
+                const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+                if (event.key === "Tab") event.preventDefault();
+                if (!isModifierKey && event.key.length === 1)
+                  handleTypeaheadSearch(event.key);
+                if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                  const items = getItems().filter((item) => !item.disabled);
+                  let candidateNodes = items.map((item) => item.ref.current);
+                  if (["ArrowUp", "End"].includes(event.key)) {
+                    candidateNodes = candidateNodes.slice().reverse();
+                  }
+                  if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+                    const currentElement = event.target;
+                    const currentIndex = candidateNodes.indexOf(currentElement);
+                    candidateNodes = candidateNodes.slice(currentIndex + 1);
+                  }
+                  setTimeout(() => focusFirst(candidateNodes));
+                  event.preventDefault();
                 }
-              )
-            }
-          )
-        }
-      ) })
-    }
+              }
+            )
+          }
+        )
+      )
+    ))
   );
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
@@ -714,41 +704,41 @@ var SelectItemAlignedPosition = import_react2.default.forwardRef((props, forward
     },
     [position, focusSelectedItem]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ import_react2.default.createElement(
     SelectViewportProvider,
     {
       scope: __scopeSelect,
       contentWrapper,
       shouldExpandOnScrollRef,
-      onScrollButtonChange: handleScrollButtonChange,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "div",
+      onScrollButtonChange: handleScrollButtonChange
+    },
+    /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        ref: setContentWrapper,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          position: "fixed",
+          zIndex: contentZIndex
+        }
+      },
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_react_primitive2.Primitive.div,
         {
-          ref: setContentWrapper,
+          ...popperProps,
+          ref: composedRefs,
           style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "fixed",
-            zIndex: contentZIndex
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react_primitive2.Primitive.div,
-            {
-              ...popperProps,
-              ref: composedRefs,
-              style: {
-                // When we get the height of the content, it includes borders. If we were to set
-                // the height without having `boxSizing: 'border-box'` it would be too big.
-                boxSizing: "border-box",
-                // We need to ensure the content doesn't get taller than the wrapper
-                maxHeight: "100%",
-                ...popperProps.style
-              }
-            }
-          )
+            // When we get the height of the content, it includes borders. If we were to set
+            // the height without having `boxSizing: 'border-box'` it would be too big.
+            boxSizing: "border-box",
+            // We need to ensure the content doesn't get taller than the wrapper
+            maxHeight: "100%",
+            ...popperProps.style
+          }
         }
       )
-    }
+    )
   );
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
@@ -761,7 +751,7 @@ var SelectPopperPosition = import_react2.default.forwardRef((props, forwardedRef
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ import_react2.default.createElement(
     PopperPrimitive2.Content,
     {
       ...popperScope,
@@ -837,7 +827,6 @@ var import_react3 = __toESM(require("react"));
 var import_react_primitive3 = require("@huin-core/react-primitive");
 var import_react_compose_refs4 = require("@huin-core/react-compose-refs");
 var import_react_use_layout_effect2 = require("@huin-core/react-use-layout-effect");
-var import_jsx_runtime4 = require("react/jsx-runtime");
 var VALUE_NAME = "SelectValue";
 var SelectValue = import_react3.default.forwardRef(
   (props, forwardedRef) => {
@@ -852,14 +841,14 @@ var SelectValue = import_react3.default.forwardRef(
     (0, import_react_use_layout_effect2.useLayoutEffect)(() => {
       onValueNodeHasChildrenChange(hasChildren);
     }, [onValueNodeHasChildrenChange, hasChildren]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ import_react3.default.createElement(
       import_react_primitive3.Primitive.span,
       {
         ...valueProps,
         ref: composedRefs,
-        style: { pointerEvents: "none" },
-        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: placeholder }) : children
-      }
+        style: { pointerEvents: "none" }
+      },
+      shouldShowPlaceholder(context.value) ? /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, placeholder) : children
     );
   }
 );
@@ -870,7 +859,6 @@ function shouldShowPlaceholder(value) {
 
 // packages/react/select/src/SelectTrigger.tsx
 var import_primitive3 = require("@huin-core/primitive");
-var import_jsx_runtime5 = require("react/jsx-runtime");
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var TRIGGER_NAME = "SelectTrigger";
 var SelectTrigger = import_react4.default.forwardRef((props, forwardedRef) => {
@@ -905,7 +893,7 @@ var SelectTrigger = import_react4.default.forwardRef((props, forwardedRef) => {
       };
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopperPrimitive3.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ import_react4.default.createElement(PopperPrimitive3.Anchor, { asChild: true, ...popperScope }, /* @__PURE__ */ import_react4.default.createElement(
     import_react_primitive4.Primitive.button,
     {
       type: "button",
@@ -949,44 +937,42 @@ var SelectTrigger = import_react4.default.forwardRef((props, forwardedRef) => {
         }
       })
     }
-  ) });
+  ));
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 
 // packages/react/select/src/SelectIcon.tsx
 var import_react5 = __toESM(require("react"));
 var import_react_primitive5 = require("@huin-core/react-primitive");
-var import_jsx_runtime6 = require("react/jsx-runtime");
 var ICON_NAME = "SelectIcon";
 var SelectIcon = import_react5.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, children, ...iconProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_primitive5.Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_primitive5.Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef }, children || "\u25BC");
   }
 );
 SelectIcon.displayName = ICON_NAME;
 
 // packages/react/select/src/SelectPortal.tsx
+var import_react6 = __toESM(require("react"));
 var import_react_portal = require("@huin-core/react-portal");
-var import_jsx_runtime7 = require("react/jsx-runtime");
 var PORTAL_NAME = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_portal.Portal, { asChild: true, ...props });
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_portal.Portal, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME;
 
 // packages/react/select/src/SelectGroup.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_primitive6 = require("@huin-core/react-primitive");
 var import_react_id2 = require("@huin-core/react-id");
-var import_jsx_runtime8 = require("react/jsx-runtime");
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = import_react6.default.forwardRef(
+var SelectGroup = import_react7.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...groupProps } = props;
     const groupId = (0, import_react_id2.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ import_react7.default.createElement(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId }, /* @__PURE__ */ import_react7.default.createElement(
       import_react_primitive6.Primitive.div,
       {
         role: "group",
@@ -994,36 +980,34 @@ var SelectGroup = import_react6.default.forwardRef(
         ...groupProps,
         ref: forwardedRef
       }
-    ) });
+    ));
   }
 );
 SelectGroup.displayName = GROUP_NAME;
 
 // packages/react/select/src/SelectLabel.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_primitive7 = require("@huin-core/react-primitive");
-var import_jsx_runtime9 = require("react/jsx-runtime");
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = import_react7.default.forwardRef(
+var SelectLabel = import_react8.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...labelProps } = props;
     const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_primitive7.Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_primitive7.Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
   }
 );
 SelectLabel.displayName = LABEL_NAME;
 
 // packages/react/select/src/SelectItem.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_primitive8 = require("@huin-core/react-primitive");
 var import_react_compose_refs6 = require("@huin-core/react-compose-refs");
 var import_react_id3 = require("@huin-core/react-id");
 var import_primitive4 = require("@huin-core/primitive");
-var import_jsx_runtime10 = require("react/jsx-runtime");
 var SELECTION_KEYS = [" ", "Enter"];
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = import_react8.default.forwardRef(
+var SelectItem = import_react9.default.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSelect,
@@ -1035,14 +1019,14 @@ var SelectItem = import_react8.default.forwardRef(
     const context = useSelectContext(ITEM_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
     const isSelected = context.value === value;
-    const [textValue, setTextValue] = import_react8.default.useState(textValueProp ?? "");
-    const [isFocused, setIsFocused] = import_react8.default.useState(false);
+    const [textValue, setTextValue] = import_react9.default.useState(textValueProp ?? "");
+    const [isFocused, setIsFocused] = import_react9.default.useState(false);
     const composedRefs = (0, import_react_compose_refs6.useComposedRefs)(
       forwardedRef,
       (node) => contentContext.itemRefCallback?.(node, value, disabled)
     );
     const textId = (0, import_react_id3.useId)();
-    const pointerTypeRef = import_react8.default.useRef("touch");
+    const pointerTypeRef = import_react9.default.useRef("touch");
     const handleSelect = () => {
       if (!disabled) {
         context.onValueChange(value);
@@ -1054,7 +1038,7 @@ var SelectItem = import_react8.default.forwardRef(
         "A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ import_react9.default.createElement(
       SelectItemContextProvider,
       {
         scope: __scopeSelect,
@@ -1062,78 +1046,77 @@ var SelectItem = import_react8.default.forwardRef(
         disabled,
         textId,
         isSelected,
-        onItemTextChange: import_react8.default.useCallback((node) => {
+        onItemTextChange: import_react9.default.useCallback((node) => {
           setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
-        }, []),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Collection.ItemSlot,
+        }, [])
+      },
+      /* @__PURE__ */ import_react9.default.createElement(
+        Collection.ItemSlot,
+        {
+          scope: __scopeSelect,
+          value,
+          disabled,
+          textValue
+        },
+        /* @__PURE__ */ import_react9.default.createElement(
+          import_react_primitive8.Primitive.div,
           {
-            scope: __scopeSelect,
-            value,
-            disabled,
-            textValue,
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_primitive8.Primitive.div,
-              {
-                role: "option",
-                "aria-labelledby": textId,
-                "data-highlighted": isFocused ? "" : void 0,
-                "aria-selected": isSelected && isFocused,
-                "data-state": isSelected ? "checked" : "unchecked",
-                "aria-disabled": disabled || void 0,
-                "data-disabled": disabled ? "" : void 0,
-                tabIndex: disabled ? void 0 : -1,
-                ...itemProps,
-                ref: composedRefs,
-                onFocus: (0, import_primitive4.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
-                onBlur: (0, import_primitive4.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
-                onClick: (0, import_primitive4.composeEventHandlers)(itemProps.onClick, () => {
-                  if (pointerTypeRef.current !== "mouse") handleSelect();
-                }),
-                onPointerUp: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerUp, () => {
-                  if (pointerTypeRef.current === "mouse") handleSelect();
-                }),
-                onPointerDown: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerDown, (event) => {
-                  pointerTypeRef.current = event.pointerType;
-                }),
-                onPointerMove: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerMove, (event) => {
-                  pointerTypeRef.current = event.pointerType;
-                  if (disabled) {
-                    contentContext.onItemLeave?.();
-                  } else if (pointerTypeRef.current === "mouse") {
-                    event.currentTarget.focus({ preventScroll: true });
-                  }
-                }),
-                onPointerLeave: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
-                  if (event.currentTarget === document.activeElement) {
-                    contentContext.onItemLeave?.();
-                  }
-                }),
-                onKeyDown: (0, import_primitive4.composeEventHandlers)(itemProps.onKeyDown, (event) => {
-                  const isTypingAhead = contentContext.searchRef?.current !== "";
-                  if (isTypingAhead && event.key === " ") return;
-                  if (SELECTION_KEYS.includes(event.key)) handleSelect();
-                  if (event.key === " ") event.preventDefault();
-                })
+            role: "option",
+            "aria-labelledby": textId,
+            "data-highlighted": isFocused ? "" : void 0,
+            "aria-selected": isSelected && isFocused,
+            "data-state": isSelected ? "checked" : "unchecked",
+            "aria-disabled": disabled || void 0,
+            "data-disabled": disabled ? "" : void 0,
+            tabIndex: disabled ? void 0 : -1,
+            ...itemProps,
+            ref: composedRefs,
+            onFocus: (0, import_primitive4.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
+            onBlur: (0, import_primitive4.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
+            onClick: (0, import_primitive4.composeEventHandlers)(itemProps.onClick, () => {
+              if (pointerTypeRef.current !== "mouse") handleSelect();
+            }),
+            onPointerUp: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerUp, () => {
+              if (pointerTypeRef.current === "mouse") handleSelect();
+            }),
+            onPointerDown: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerDown, (event) => {
+              pointerTypeRef.current = event.pointerType;
+            }),
+            onPointerMove: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerMove, (event) => {
+              pointerTypeRef.current = event.pointerType;
+              if (disabled) {
+                contentContext.onItemLeave?.();
+              } else if (pointerTypeRef.current === "mouse") {
+                event.currentTarget.focus({ preventScroll: true });
               }
-            )
+            }),
+            onPointerLeave: (0, import_primitive4.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
+              if (event.currentTarget === document.activeElement) {
+                contentContext.onItemLeave?.();
+              }
+            }),
+            onKeyDown: (0, import_primitive4.composeEventHandlers)(itemProps.onKeyDown, (event) => {
+              const isTypingAhead = contentContext.searchRef?.current !== "";
+              if (isTypingAhead && event.key === " ") return;
+              if (SELECTION_KEYS.includes(event.key)) handleSelect();
+              if (event.key === " ") event.preventDefault();
+            })
           }
         )
-      }
+      )
     );
   }
 );
 SelectItem.displayName = ITEM_NAME;
 
 // packages/react/select/src/SelectItemText.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_primitive9 = require("@huin-core/react-primitive");
 var import_react_compose_refs7 = require("@huin-core/react-compose-refs");
 var import_react_use_layout_effect3 = require("@huin-core/react-use-layout-effect");
 var import_react_dom2 = __toESM(require("react-dom"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = import_react9.default.forwardRef((props, forwardedRef) => {
+var SelectItemText = import_react10.default.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
@@ -1142,7 +1125,7 @@ var SelectItemText = import_react9.default.forwardRef((props, forwardedRef) => {
     ITEM_TEXT_NAME,
     __scopeSelect
   );
-  const [itemTextNode, setItemTextNode] = import_react9.default.useState(null);
+  const [itemTextNode, setItemTextNode] = import_react10.default.useState(null);
   const composedRefs = (0, import_react_compose_refs7.useComposedRefs)(
     forwardedRef,
     (node) => setItemTextNode(node),
@@ -1154,15 +1137,15 @@ var SelectItemText = import_react9.default.forwardRef((props, forwardedRef) => {
     )
   );
   const textContent = itemTextNode?.textContent;
-  const nativeOption = import_react9.default.useMemo(
-    () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const nativeOption = import_react10.default.useMemo(
+    () => /* @__PURE__ */ import_react10.default.createElement(
       "option",
       {
+        key: itemContext.value,
         value: itemContext.value,
-        disabled: itemContext.disabled,
-        children: textContent
+        disabled: itemContext.disabled
       },
-      itemContext.value
+      textContent
     ),
     [itemContext.disabled, itemContext.value, textContent]
   );
@@ -1171,37 +1154,32 @@ var SelectItemText = import_react9.default.forwardRef((props, forwardedRef) => {
     onNativeOptionAdd(nativeOption);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_primitive9.Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
-    itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? import_react_dom2.default.createPortal(itemTextProps.children, context.valueNode) : null
-  ] });
+  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_react_primitive9.Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? import_react_dom2.default.createPortal(itemTextProps.children, context.valueNode) : null);
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 
 // packages/react/select/src/SelectItemIndicator.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_primitive10 = require("@huin-core/react-primitive");
-var import_jsx_runtime12 = require("react/jsx-runtime");
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = import_react10.default.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = import_react11.default.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_primitive10.Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+  return itemContext.isSelected ? /* @__PURE__ */ import_react11.default.createElement(import_react_primitive10.Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 
 // packages/react/select/src/SelectScrollUpButton.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // packages/react/select/src/SelectScrollDownButton.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_compose_refs8 = require("@huin-core/react-compose-refs");
 var import_react_use_layout_effect4 = require("@huin-core/react-use-layout-effect");
 var import_react_primitive11 = require("@huin-core/react-primitive");
 var import_primitive5 = require("@huin-core/primitive");
-var import_jsx_runtime13 = require("react/jsx-runtime");
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = import_react11.default.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = import_react12.default.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(
     SCROLL_DOWN_BUTTON_NAME,
     props.__scopeSelect
@@ -1210,7 +1188,7 @@ var SelectScrollDownButton = import_react11.default.forwardRef((props, forwarded
     SCROLL_DOWN_BUTTON_NAME,
     props.__scopeSelect
   );
-  const [canScrollDown, setCanScrollDown] = import_react11.default.useState(false);
+  const [canScrollDown, setCanScrollDown] = import_react12.default.useState(false);
   const composedRefs = (0, import_react_compose_refs8.useComposedRefs)(
     forwardedRef,
     viewportContext.onScrollButtonChange
@@ -1229,7 +1207,7 @@ var SelectScrollDownButton = import_react11.default.forwardRef((props, forwarded
       return () => viewport.removeEventListener("scroll", handleScroll2);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return canScrollDown ? /* @__PURE__ */ import_react12.default.createElement(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -1244,21 +1222,21 @@ var SelectScrollDownButton = import_react11.default.forwardRef((props, forwarded
   ) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = import_react11.default.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = import_react12.default.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext(
     "SelectScrollButton",
     __scopeSelect
   );
-  const autoScrollTimerRef = import_react11.default.useRef(null);
+  const autoScrollTimerRef = import_react12.default.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = import_react11.default.useCallback(() => {
+  const clearAutoScrollTimer = import_react12.default.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  import_react11.default.useEffect(() => {
+  import_react12.default.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   (0, import_react_use_layout_effect4.useLayoutEffect)(() => {
@@ -1267,7 +1245,7 @@ var SelectScrollButtonImpl = import_react11.default.forwardRef((props, forwarded
     );
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ import_react12.default.createElement(
     import_react_primitive11.Primitive.div,
     {
       "aria-hidden": true,
@@ -1304,9 +1282,8 @@ var SelectScrollButtonImpl = import_react11.default.forwardRef((props, forwarded
 // packages/react/select/src/SelectScrollUpButton.tsx
 var import_react_compose_refs9 = require("@huin-core/react-compose-refs");
 var import_react_use_layout_effect5 = require("@huin-core/react-use-layout-effect");
-var import_jsx_runtime14 = require("react/jsx-runtime");
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = import_react12.default.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = import_react13.default.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(
     SCROLL_UP_BUTTON_NAME,
     props.__scopeSelect
@@ -1315,7 +1292,7 @@ var SelectScrollUpButton = import_react12.default.forwardRef((props, forwardedRe
     SCROLL_UP_BUTTON_NAME,
     props.__scopeSelect
   );
-  const [canScrollUp, setCanScrollUp] = import_react12.default.useState(false);
+  const [canScrollUp, setCanScrollUp] = import_react13.default.useState(false);
   const composedRefs = (0, import_react_compose_refs9.useComposedRefs)(
     forwardedRef,
     viewportContext.onScrollButtonChange
@@ -1333,7 +1310,7 @@ var SelectScrollUpButton = import_react12.default.forwardRef((props, forwardedRe
       return () => viewport.removeEventListener("scroll", handleScroll2);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return canScrollUp ? /* @__PURE__ */ import_react13.default.createElement(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -1350,28 +1327,26 @@ var SelectScrollUpButton = import_react12.default.forwardRef((props, forwardedRe
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 
 // packages/react/select/src/SelectSeparator.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_react_primitive12 = require("@huin-core/react-primitive");
-var import_jsx_runtime15 = require("react/jsx-runtime");
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = import_react13.default.forwardRef((props, forwardedRef) => {
+var SelectSeparator = import_react14.default.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive12.Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_primitive12.Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 
 // packages/react/select/src/SelectArrow.tsx
 var PopperPrimitive4 = __toESM(require("@huin-core/react-popper"));
-var import_react14 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react15 = __toESM(require("react"));
 var ARROW_NAME = "SelectArrow";
-var SelectArrow = import_react14.default.forwardRef(
+var SelectArrow = import_react15.default.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
     const context = useSelectContext(ARROW_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ import_react15.default.createElement(
       PopperPrimitive4.Arrow,
       {
         ...popperScope,