@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/Select.cjs

@@ -0,0 +1,1429 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Select_exports = {};
+__export(Select_exports, {
+  Arrow: () => Arrow,
+  BubbleInput: () => BubbleInput,
+  Content: () => Content,
+  Group: () => Group,
+  Icon: () => Icon,
+  Item: () => Item,
+  ItemIndicator: () => ItemIndicator,
+  ItemText: () => ItemText,
+  Label: () => Label,
+  Portal: () => Portal,
+  Provider: () => Provider,
+  Root: () => Root,
+  ScrollDownButton: () => ScrollDownButton,
+  ScrollUpButton: () => ScrollUpButton,
+  Select: () => Root,
+  SelectArrow: () => Arrow,
+  SelectBubbleInput: () => BubbleInput,
+  SelectContent: () => Content,
+  SelectGroup: () => Group,
+  SelectIcon: () => Icon,
+  SelectItem: () => Item,
+  SelectItemIndicator: () => ItemIndicator,
+  SelectItemText: () => ItemText,
+  SelectLabel: () => Label,
+  SelectPortal: () => Portal,
+  SelectProvider: () => Provider,
+  SelectScrollDownButton: () => ScrollDownButton,
+  SelectScrollUpButton: () => ScrollUpButton,
+  SelectSeparator: () => Separator,
+  SelectTrigger: () => Trigger,
+  SelectValue: () => Value,
+  SelectViewport: () => Viewport,
+  Separator: () => Separator,
+  Trigger: () => Trigger,
+  Value: () => Value,
+  Viewport: () => Viewport,
+  createSelectScope: () => createSelectScope
+});
+module.exports = __toCommonJS(Select_exports);
+var import_octane = require("octane");
+var import_aria_hidden = require("aria-hidden");
+var import_collection = require("./collection.cjs");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_direction = require("./direction.cjs");
+var import_DismissableLayer = require("./DismissableLayer.cjs");
+var import_FocusScope = require("./FocusScope.cjs");
+var import_focus_guards = require("./focus-guards.cjs");
+var import_internal = require("./internal.cjs");
+var PopperPrimitive = __toESM(require("./Popper.cjs"), 1);
+var import_Popper = require("./Popper.cjs");
+var import_Portal = require("./Portal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_scroll_lock = require("./scroll-lock.cjs");
+var import_use_callback_ref = require("./use-callback-ref.cjs");
+var import_use_previous = require("./use-previous.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+var import_VisuallyHidden = require("./VisuallyHidden.cjs");
+const OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
+const SELECTION_KEYS = [" ", "Enter"];
+const SELECT_NAME = "Select";
+const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)(SELECT_NAME);
+const [createSelectContext, createSelectScope] = (0, import_context.createContextScope)(SELECT_NAME, [
+  createCollectionScope,
+  import_Popper.createPopperScope
+]);
+const usePopperScope = (0, import_Popper.createPopperScope)();
+const [SelectProviderImpl, useSelectContext] = createSelectContext(SELECT_NAME);
+const [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
+const PROVIDER_NAME = "SelectProvider";
+function Provider(props) {
+  const slot = (0, import_internal.S)("Select.Provider");
+  const {
+    __scopeSelect,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    dir,
+    name,
+    autoComplete,
+    disabled,
+    required,
+    form,
+    // internal render prop used by `Select` (Root) to compose its default parts
+    internal_do_not_use_render
+  } = props ?? {};
+  const popperScope = usePopperScope(__scopeSelect, (0, import_internal.subSlot)(slot, "popper"));
+  const [trigger, setTrigger] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "trigger"));
+  const [valueNode, setValueNode] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "valueNode"));
+  const [valueNodeHasChildren, setValueNodeHasChildren] = (0, import_octane.useState)(
+    false,
+    (0, import_internal.subSlot)(slot, "hasChildren")
+  );
+  const direction = (0, import_direction.useDirection)(dir);
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    { prop: valueProp, defaultProp: defaultValue, onChange: onValueChange },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const triggerPointerDownPosRef = (0, import_octane.useRef)(
+    null,
+    (0, import_internal.subSlot)(slot, "pointerPos")
+  );
+  const isFormControl = trigger ? !!form || !!trigger.closest("form") : true;
+  const [nativeOptionsSet, setNativeOptionsSet] = (0, import_octane.useState)(
+    /* @__PURE__ */ new Set(),
+    (0, import_internal.subSlot)(slot, "options")
+  );
+  const contentId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "contentId"));
+  const handleNativeOptionAdd = (0, import_octane.useCallback)(
+    (option) => {
+      setNativeOptionsSet((prev) => new Set(prev).add(option));
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "optAdd")
+  );
+  const handleNativeOptionRemove = (0, import_octane.useCallback)(
+    (option) => {
+      setNativeOptionsSet((prev) => {
+        const optionsSet = new Set(prev);
+        optionsSet.delete(option);
+        return optionsSet;
+      });
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "optRemove")
+  );
+  const context = {
+    required,
+    trigger,
+    onTriggerChange: setTrigger,
+    valueNode,
+    onValueNodeChange: setValueNode,
+    valueNodeHasChildren,
+    onValueNodeHasChildrenChange: setValueNodeHasChildren,
+    contentId,
+    value,
+    onValueChange: setValue,
+    open,
+    onOpenChange: setOpen,
+    dir: direction,
+    triggerPointerDownPosRef,
+    disabled,
+    name,
+    autoComplete,
+    form,
+    nativeOptions: nativeOptionsSet,
+    isFormControl
+  };
+  return (0, import_octane.createElement)(PopperPrimitive.Root, {
+    ...popperScope,
+    children: (0, import_octane.createElement)(SelectProviderImpl, {
+      scope: __scopeSelect,
+      ...context,
+      children: (0, import_octane.createElement)(Collection.Provider, {
+        scope: __scopeSelect,
+        children: (0, import_octane.createElement)(SelectNativeOptionsProvider, {
+          scope: __scopeSelect,
+          onNativeOptionAdd: handleNativeOptionAdd,
+          onNativeOptionRemove: handleNativeOptionRemove,
+          children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+        })
+      })
+    })
+  });
+}
+function Root(props) {
+  const { __scopeSelect, children, ...providerProps } = props ?? {};
+  return (0, import_octane.createElement)(Provider, {
+    __scopeSelect,
+    ...providerProps,
+    // Every array entry is keyed (unkeyed/null entries would trip octane's one-time
+    // missing-key warning in the de-opt list renderer); `children` rides through a
+    // keyed passthrough component, and the bubble input is simply omitted when the
+    // select isn't a form control — these are fixed-position siblings.
+    internal_do_not_use_render: (context) => {
+      const nodes = [(0, import_octane.createElement)(ValueFragment, { key: "children", children })];
+      if (context.isFormControl) {
+        nodes.push((0, import_octane.createElement)(BubbleInput, { key: "bubble", __scopeSelect }));
+      }
+      return nodes;
+    }
+  });
+}
+const TRIGGER_NAME = "SelectTrigger";
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Select.Trigger");
+  const { __scopeSelect, disabled = false, ref: forwardedRef, ...triggerProps } = props ?? {};
+  const popperScope = usePopperScope(__scopeSelect, (0, import_internal.subSlot)(slot, "popper"));
+  const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+  const isDisabled = context.disabled || disabled;
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    context.onTriggerChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const getItems = useCollection(__scopeSelect, (0, import_internal.subSlot)(slot, "items"));
+  const pointerTypeRef = (0, import_octane.useRef)("touch", (0, import_internal.subSlot)(slot, "pointerType"));
+  const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch(
+    (search) => {
+      const enabledItems = getItems().filter((item) => !item.disabled);
+      const currentItem = enabledItems.find((item) => item.value === context.value);
+      const nextItem = findNextItem(enabledItems, search, currentItem);
+      if (nextItem !== void 0) {
+        context.onValueChange(nextItem.value);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "typeahead")
+  );
+  const handleOpen = (pointerEvent) => {
+    if (!isDisabled) {
+      context.onOpenChange(true);
+      resetTypeahead();
+    }
+    if (pointerEvent) {
+      context.triggerPointerDownPosRef.current = {
+        x: Math.round(pointerEvent.pageX),
+        y: Math.round(pointerEvent.pageY)
+      };
+    }
+  };
+  return (0, import_octane.createElement)(PopperPrimitive.Anchor, {
+    asChild: true,
+    ...popperScope,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+      type: "button",
+      role: "combobox",
+      "aria-controls": context.open ? context.contentId : void 0,
+      "aria-expanded": context.open,
+      "aria-required": context.required,
+      "aria-autocomplete": "none",
+      dir: context.dir,
+      "data-state": context.open ? "open" : "closed",
+      disabled: isDisabled,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-placeholder": shouldShowPlaceholder(context.value) ? "" : void 0,
+      ...triggerProps,
+      ref: composedRefs,
+      // Enable compatibility with native label or custom `Label` "click" for Safari:
+      onClick: (0, import_compose_event_handlers.composeEventHandlers)(triggerProps.onClick, (event) => {
+        event.currentTarget.focus();
+        if (pointerTypeRef.current !== "mouse") {
+          handleOpen(event);
+        }
+      }),
+      onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(triggerProps.onPointerDown, (event) => {
+        pointerTypeRef.current = event.pointerType;
+        const target = event.target;
+        if (typeof target.hasPointerCapture === "function" && target.hasPointerCapture(event.pointerId)) {
+          target.releasePointerCapture(event.pointerId);
+        }
+        if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse") {
+          handleOpen(event);
+          event.preventDefault();
+        }
+      }),
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(triggerProps.onKeyDown, (event) => {
+        const isTypingAhead = searchRef.current !== "";
+        const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+        if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
+        if (isTypingAhead && event.key === " ") return;
+        if (OPEN_KEYS.includes(event.key)) {
+          handleOpen();
+          event.preventDefault();
+        }
+      })
+    })
+  });
+}
+const VALUE_NAME = "SelectValue";
+function Value(props) {
+  const slot = (0, import_internal.S)("Select.Value");
+  const {
+    __scopeSelect,
+    className,
+    style,
+    children,
+    placeholder = "",
+    ref: forwardedRef,
+    ...valueProps
+  } = props ?? {};
+  void className;
+  void style;
+  const context = useSelectContext(VALUE_NAME, __scopeSelect);
+  const { onValueNodeHasChildrenChange } = context;
+  const hasChildren = children !== void 0;
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    context.onValueNodeChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      onValueNodeHasChildrenChange(hasChildren);
+    },
+    [onValueNodeHasChildrenChange, hasChildren],
+    (0, import_internal.subSlot)(slot, "e:hasChildren")
+  );
+  const showPlaceholder = shouldShowPlaceholder(context.value);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+    ...valueProps,
+    asChild: showPlaceholder ? false : valueProps.asChild,
+    ref: composedRefs,
+    // we don't want events from the portalled `SelectValue` children to bubble
+    // through the item they came from
+    style: { pointerEvents: "none" },
+    // The source wraps in `<React.Fragment key={placeholder|value}>`. The component
+    // wrapper here doubles as an octane adaptation: it forces the span's children
+    // through the BLOCK (marker-delimited) render path, so the ItemText content
+    // portal'd into this span from elsewhere isn't swept by the raw host
+    // reconciler (see suspected-bug note in the port summary).
+    children: (0, import_octane.createElement)(ValueFragment, {
+      key: showPlaceholder ? "placeholder" : "value",
+      children: showPlaceholder ? placeholder : children
+    })
+  });
+}
+function ValueFragment(props) {
+  return props?.children ?? null;
+}
+function Icon(props) {
+  const { __scopeSelect, children, ...iconProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+    "aria-hidden": true,
+    ...iconProps,
+    children: children || "\u25BC"
+  });
+}
+const PORTAL_NAME = "SelectPortal";
+const [PortalProvider, usePortalContext] = createSelectContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+function Portal(props) {
+  const { __scopeSelect, forceMount, children, ...portalProps } = props ?? {};
+  return (0, import_octane.createElement)(PortalProvider, {
+    scope: __scopeSelect,
+    forceMount,
+    children: (0, import_octane.createElement)(import_Portal.Portal, {
+      asChild: typeof children !== "function",
+      ...portalProps,
+      children
+    })
+  });
+}
+const CONTENT_NAME = "SelectContent";
+function Content(props) {
+  const slot = (0, import_internal.S)("Select.Content");
+  const portalContext = usePortalContext(CONTENT_NAME, props?.__scopeSelect);
+  const { forceMount = portalContext.forceMount, ref: forwardedRef, ...contentProps } = props ?? {};
+  const context = useSelectContext(CONTENT_NAME, props?.__scopeSelect);
+  const [fragment, setFragment] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "fragment")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      setFragment(new DocumentFragment());
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:fragment")
+  );
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || context.open,
+    children: ({ present }) => present ? (0, import_octane.createElement)(ContentImpl, { ...contentProps, ref: forwardedRef }) : (0, import_octane.createElement)(ContentFragment, { ...contentProps, fragment })
+  });
+}
+function ContentFragment(props) {
+  const { __scopeSelect, children, fragment, ref: forwardedRef } = props ?? {};
+  if (!fragment) return null;
+  return (0, import_octane.createPortal)(
+    (0, import_octane.createElement)(SelectContentProvider, {
+      scope: __scopeSelect,
+      children: (0, import_octane.createElement)(Collection.Slot, {
+        scope: __scopeSelect,
+        children: (0, import_octane.createElement)("div", { ref: forwardedRef, children })
+      })
+    }),
+    // octane's createPortal target is typed as Element; a detached DocumentFragment
+    // works identically (appendChild + EventTarget for delegated listeners).
+    fragment
+  );
+}
+const CONTENT_MARGIN = 10;
+const [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME);
+const CONTENT_IMPL_NAME = "SelectContentImpl";
+function ContentImpl(props) {
+  const slot = (0, import_internal.S)("Select.ContentImpl");
+  const {
+    __scopeSelect,
+    position = "item-aligned",
+    onCloseAutoFocus,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    //
+    // PopperContent props
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    arrowPadding,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    hideWhenDetached,
+    avoidCollisions,
+    //
+    ref: forwardedRef,
+    ...contentProps
+  } = props;
+  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const [viewport, setViewport] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "viewport"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setContent, (0, import_internal.subSlot)(slot, "refs"));
+  const [selectedItem, setSelectedItem] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "selItem")
+  );
+  const [selectedItemText, setSelectedItemText] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "selText")
+  );
+  const getItems = useCollection(__scopeSelect, (0, import_internal.subSlot)(slot, "items"));
+  const [isPositioned, setIsPositioned] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "positioned"));
+  const firstValidItemFoundRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "firstValid"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (content) return (0, import_aria_hidden.hideOthers)(content);
+    },
+    [content],
+    (0, import_internal.subSlot)(slot, "e:hide")
+  );
+  (0, import_focus_guards.useFocusGuards)((0, import_internal.subSlot)(slot, "guards"));
+  const focusFirst = (0, import_octane.useCallback)(
+    (candidates) => {
+      const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
+      const [lastItem] = restItems.slice(-1);
+      const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+      for (const candidate of candidates) {
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+        candidate?.scrollIntoView?.({ block: "nearest" });
+        if (candidate === firstItem && viewport) viewport.scrollTop = 0;
+        if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;
+        candidate?.focus();
+        if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+      }
+    },
+    [getItems, viewport],
+    (0, import_internal.subSlot)(slot, "focusFirst")
+  );
+  const focusSelectedItem = (0, import_octane.useCallback)(
+    () => focusFirst([selectedItem, content]),
+    [focusFirst, selectedItem, content],
+    (0, import_internal.subSlot)(slot, "focusSel")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (isPositioned) {
+        focusSelectedItem();
+      }
+    },
+    [isPositioned, focusSelectedItem],
+    (0, import_internal.subSlot)(slot, "e:focus")
+  );
+  const { onOpenChange, triggerPointerDownPosRef } = context;
+  (0, import_octane.useEffect)(
+    () => {
+      if (content) {
+        let pointerMoveDelta = { x: 0, y: 0 };
+        const handlePointerMove = (event) => {
+          pointerMoveDelta = {
+            x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),
+            y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0))
+          };
+        };
+        const handlePointerUp = (event) => {
+          if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
+            event.preventDefault();
+          } else {
+            if (!event.composedPath().includes(content)) {
+              onOpenChange(false);
+            }
+          }
+          document.removeEventListener("pointermove", handlePointerMove);
+          triggerPointerDownPosRef.current = null;
+        };
+        if (triggerPointerDownPosRef.current !== null) {
+          document.addEventListener("pointermove", handlePointerMove);
+          document.addEventListener("pointerup", handlePointerUp, { capture: true, once: true });
+        }
+        return () => {
+          document.removeEventListener("pointermove", handlePointerMove);
+          document.removeEventListener("pointerup", handlePointerUp, { capture: true });
+        };
+      }
+    },
+    [content, onOpenChange, triggerPointerDownPosRef],
+    (0, import_internal.subSlot)(slot, "e:pointer")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const close = () => onOpenChange(false);
+      window.addEventListener("blur", close);
+      window.addEventListener("resize", close);
+      return () => {
+        window.removeEventListener("blur", close);
+        window.removeEventListener("resize", close);
+      };
+    },
+    [onOpenChange],
+    (0, import_internal.subSlot)(slot, "e:close")
+  );
+  const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch(
+    (search) => {
+      const enabledItems = getItems().filter((item) => !item.disabled);
+      const currentItem = enabledItems.find(
+        (item) => item.ref.current === document.activeElement
+      );
+      const nextItem = findNextItem(enabledItems, search, currentItem);
+      if (nextItem) {
+        setTimeout(() => nextItem.ref.current?.focus());
+      }
+    },
+    (0, import_internal.subSlot)(slot, "typeahead")
+  );
+  const itemRefCallback = (0, import_octane.useCallback)(
+    (node, value, disabled) => {
+      const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
+      const isSelectedItem = context.value !== void 0 && context.value === value;
+      if (isSelectedItem || isFirstValidItem) {
+        setSelectedItem(node);
+        if (isFirstValidItem) firstValidItemFoundRef.current = true;
+      }
+    },
+    [context.value],
+    (0, import_internal.subSlot)(slot, "itemRef")
+  );
+  const handleItemLeave = (0, import_octane.useCallback)(
+    () => content?.focus(),
+    [content],
+    (0, import_internal.subSlot)(slot, "itemLeave")
+  );
+  const itemTextRefCallback = (0, import_octane.useCallback)(
+    (node, value, disabled) => {
+      const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
+      const isSelectedItem = context.value !== void 0 && context.value === value;
+      if (isSelectedItem || isFirstValidItem) {
+        setSelectedItemText(node);
+      }
+    },
+    [context.value],
+    (0, import_internal.subSlot)(slot, "itemTextRef")
+  );
+  (0, import_scroll_lock.useScrollLock)(true, (0, import_internal.subSlot)(slot, "lock"));
+  const SelectPosition = position === "popper" ? PopperPosition : ItemAlignedPosition;
+  const popperContentProps = SelectPosition === PopperPosition ? {
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    arrowPadding,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    hideWhenDetached,
+    avoidCollisions
+  } : {};
+  return (0, import_octane.createElement)(SelectContentProvider, {
+    scope: __scopeSelect,
+    content,
+    viewport,
+    onViewportChange: setViewport,
+    itemRefCallback,
+    selectedItem,
+    onItemLeave: handleItemLeave,
+    itemTextRefCallback,
+    focusSelectedItem,
+    selectedItemText,
+    position,
+    isPositioned,
+    searchRef,
+    children: (0, import_octane.createElement)(import_FocusScope.FocusScope, {
+      asChild: true,
+      // we make sure we're not trapping once it's been closed
+      // (closed !== unmounted when animating out)
+      trapped: context.open,
+      onMountAutoFocus: (event) => {
+        event.preventDefault();
+      },
+      onUnmountAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(onCloseAutoFocus, (event) => {
+        context.trigger?.focus({ preventScroll: true });
+        event.preventDefault();
+      }),
+      children: (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
+        asChild: true,
+        disableOutsidePointerEvents: true,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        // When focus is trapped, a focusout event may still happen.
+        // We make sure we don't trigger our `onDismiss` in such case.
+        onFocusOutside: (event) => event.preventDefault(),
+        onDismiss: () => context.onOpenChange(false),
+        children: (0, import_octane.createElement)(SelectPosition, {
+          role: "listbox",
+          id: context.contentId,
+          "data-state": context.open ? "open" : "closed",
+          dir: context.dir,
+          onContextMenu: (event) => event.preventDefault(),
+          ...contentProps,
+          ...popperContentProps,
+          __scopeSelect,
+          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_compose_event_handlers.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();
+            }
+          })
+        })
+      })
+    })
+  });
+}
+const ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
+function ItemAlignedPosition(props) {
+  const slot = (0, import_internal.S)("Select.ItemAlignedPosition");
+  const { __scopeSelect, onPlaced, ref: forwardedRef, ...popperProps } = props;
+  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
+  const contentContext = useSelectContentContext(CONTENT_NAME, __scopeSelect);
+  const [contentWrapper, setContentWrapper] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "wrapper")
+  );
+  const [content, setContent] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "content"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setContent, (0, import_internal.subSlot)(slot, "refs"));
+  const getItems = useCollection(__scopeSelect, (0, import_internal.subSlot)(slot, "items"));
+  const shouldExpandOnScrollRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "expand"));
+  const shouldRepositionRef = (0, import_octane.useRef)(true, (0, import_internal.subSlot)(slot, "reposition"));
+  const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
+  const position = (0, import_octane.useCallback)(
+    () => {
+      if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
+        const triggerRect = context.trigger.getBoundingClientRect();
+        const contentRect = content.getBoundingClientRect();
+        const valueNodeRect = context.valueNode.getBoundingClientRect();
+        const itemTextRect = selectedItemText.getBoundingClientRect();
+        if (context.dir !== "rtl") {
+          const itemTextOffset = itemTextRect.left - contentRect.left;
+          const left = valueNodeRect.left - itemTextOffset;
+          const leftDelta = triggerRect.left - left;
+          const minContentWidth = triggerRect.width + leftDelta;
+          const contentWidth = Math.max(minContentWidth, contentRect.width);
+          const rightEdge = window.innerWidth - CONTENT_MARGIN;
+          const clampedLeft = clamp(left, [
+            CONTENT_MARGIN,
+            // Prevents the content from going off the starting edge of the
+            // viewport. It may still go off the ending edge, but this can be
+            // controlled by the user since they may want to manage overflow in a
+            // specific way.
+            // https://github.com/radix-ui/primitives/issues/2049
+            Math.max(CONTENT_MARGIN, rightEdge - contentWidth)
+          ]);
+          contentWrapper.style.minWidth = minContentWidth + "px";
+          contentWrapper.style.left = clampedLeft + "px";
+        } else {
+          const itemTextOffset = contentRect.right - itemTextRect.right;
+          const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
+          const rightDelta = window.innerWidth - triggerRect.right - right;
+          const minContentWidth = triggerRect.width + rightDelta;
+          const contentWidth = Math.max(minContentWidth, contentRect.width);
+          const leftEdge = window.innerWidth - CONTENT_MARGIN;
+          const clampedRight = clamp(right, [
+            CONTENT_MARGIN,
+            Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
+          ]);
+          contentWrapper.style.minWidth = minContentWidth + "px";
+          contentWrapper.style.right = clampedRight + "px";
+        }
+        const items = getItems();
+        const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
+        const itemsHeight = viewport.scrollHeight;
+        const contentStyles = window.getComputedStyle(content);
+        const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
+        const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
+        const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
+        const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
+        const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
+        const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
+        const viewportStyles = window.getComputedStyle(viewport);
+        const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
+        const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
+        const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
+        const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
+        const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
+        const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
+        const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
+        const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
+        const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
+        if (willAlignWithoutTopOverflow) {
+          const isLastItem = items.length > 0 && selectedItem === items[items.length - 1].ref.current;
+          contentWrapper.style.bottom = "0px";
+          const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
+          const clampedTriggerMiddleToBottomEdge = Math.max(
+            triggerMiddleToBottomEdge,
+            selectedItemHalfHeight + // viewport might have padding bottom, include it to avoid a scrollable viewport
+            (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth
+          );
+          const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
+          contentWrapper.style.height = height + "px";
+        } else {
+          const isFirstItem = items.length > 0 && selectedItem === items[0].ref.current;
+          contentWrapper.style.top = "0px";
+          const clampedTopEdgeToTriggerMiddle = Math.max(
+            topEdgeToTriggerMiddle,
+            contentBorderTopWidth + viewport.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
+            (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight
+          );
+          const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
+          contentWrapper.style.height = height + "px";
+          viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
+        }
+        contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;
+        contentWrapper.style.minHeight = minContentHeight + "px";
+        contentWrapper.style.maxHeight = availableHeight + "px";
+        onPlaced?.();
+        requestAnimationFrame(() => shouldExpandOnScrollRef.current = true);
+      }
+    },
+    [
+      getItems,
+      context.trigger,
+      context.valueNode,
+      contentWrapper,
+      content,
+      viewport,
+      selectedItem,
+      selectedItemText,
+      context.dir,
+      onPlaced
+    ],
+    (0, import_internal.subSlot)(slot, "position")
+  );
+  (0, import_octane.useLayoutEffect)(() => position(), [position], (0, import_internal.subSlot)(slot, "e:position"));
+  const [contentZIndex, setContentZIndex] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "zIndex")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
+    },
+    [content],
+    (0, import_internal.subSlot)(slot, "e:zIndex")
+  );
+  const handleScrollButtonChange = (0, import_octane.useCallback)(
+    (node) => {
+      if (node && shouldRepositionRef.current === true) {
+        position();
+        focusSelectedItem?.();
+        shouldRepositionRef.current = false;
+      }
+    },
+    [position, focusSelectedItem],
+    (0, import_internal.subSlot)(slot, "scrollBtn")
+  );
+  return (0, import_octane.createElement)(SelectViewportProvider, {
+    scope: __scopeSelect,
+    contentWrapper,
+    shouldExpandOnScrollRef,
+    onScrollButtonChange: handleScrollButtonChange,
+    children: (0, import_octane.createElement)("div", {
+      ref: setContentWrapper,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        position: "fixed",
+        zIndex: contentZIndex
+      },
+      children: (0, import_octane.createElement)(import_Primitive.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
+        }
+      })
+    })
+  });
+}
+function PopperPosition(props) {
+  const slot = (0, import_internal.S)("Select.PopperPosition");
+  const {
+    __scopeSelect,
+    align = "start",
+    collisionPadding = CONTENT_MARGIN,
+    ...popperProps
+  } = props ?? {};
+  const popperScope = usePopperScope(__scopeSelect, (0, import_internal.subSlot)(slot, "popper"));
+  return (0, import_octane.createElement)(PopperPrimitive.Content, {
+    ...popperScope,
+    ...popperProps,
+    align,
+    collisionPadding,
+    style: {
+      // Ensure border-box for floating-ui calculations
+      boxSizing: "border-box",
+      ...popperProps.style,
+      // re-namespace exposed content custom properties
+      "--radix-select-content-transform-origin": "var(--radix-popper-transform-origin)",
+      "--radix-select-content-available-width": "var(--radix-popper-available-width)",
+      "--radix-select-content-available-height": "var(--radix-popper-available-height)",
+      "--radix-select-trigger-width": "var(--radix-popper-anchor-width)",
+      "--radix-select-trigger-height": "var(--radix-popper-anchor-height)"
+    }
+  });
+}
+const [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME, {});
+const VIEWPORT_NAME = "SelectViewport";
+function Viewport(props) {
+  const slot = (0, import_internal.S)("Select.Viewport");
+  const { __scopeSelect, nonce, ref: forwardedRef, onScroll, ...viewportProps } = props ?? {};
+  const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
+  const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    contentContext.onViewportChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const prevScrollTopRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "prevScroll"));
+  const handleScroll = (0, import_compose_event_handlers.composeEventHandlers)(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;
+  });
+  return [
+    // Hide scrollbars cross-browser and enable momentum scroll for touch devices
+    (0, import_octane.createElement)("style", {
+      key: "style",
+      dangerouslySetInnerHTML: {
+        __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
+      },
+      nonce
+    }),
+    (0, import_octane.createElement)(Collection.Slot, {
+      key: "slot",
+      scope: __scopeSelect,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        "data-radix-select-viewport": "",
+        role: "presentation",
+        ...viewportProps,
+        ref: composedRefs,
+        onScroll: handleScroll,
+        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,
+          // Viewport should only be scrollable in the vertical direction.
+          // This won't work in vertical writing modes, so we'll need to
+          // revisit this if/when that is supported
+          // https://developer.chrome.com/blog/vertical-form-controls
+          overflow: "hidden auto",
+          ...viewportProps.style
+        }
+      })
+    })
+  ];
+}
+const GROUP_NAME = "SelectGroup";
+const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
+function Group(props) {
+  const slot = (0, import_internal.S)("Select.Group");
+  const { __scopeSelect, ...groupProps } = props ?? {};
+  const groupId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  return (0, import_octane.createElement)(SelectGroupContextProvider, {
+    scope: __scopeSelect,
+    id: groupId,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      role: "group",
+      "aria-labelledby": groupId,
+      ...groupProps
+    })
+  });
+}
+const LABEL_NAME = "SelectLabel";
+function Label(props) {
+  const { __scopeSelect, ...labelProps } = props ?? {};
+  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { id: groupContext.id, ...labelProps });
+}
+const ITEM_NAME = "SelectItem";
+const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
+function Item(props) {
+  const slot = (0, import_internal.S)("Select.Item");
+  const {
+    __scopeSelect,
+    value,
+    disabled = false,
+    textValue: textValueProp,
+    ref: forwardedRef,
+    ...itemProps
+  } = props ?? {};
+  const context = useSelectContext(ITEM_NAME, __scopeSelect);
+  const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
+  const isSelected = context.value === value;
+  const [textValue, setTextValue] = (0, import_octane.useState)(textValueProp ?? "", (0, import_internal.subSlot)(slot, "textValue"));
+  const [isFocused, setIsFocused] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "focused"));
+  const handleItemRefCallback = (0, import_use_callback_ref.useCallbackRef)(
+    (node) => contentContext.itemRefCallback?.(node, value, disabled),
+    (0, import_internal.subSlot)(slot, "refCb")
+  );
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, handleItemRefCallback, (0, import_internal.subSlot)(slot, "refs"));
+  const textId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "textId"));
+  const pointerTypeRef = (0, import_octane.useRef)("touch", (0, import_internal.subSlot)(slot, "pointerType"));
+  const handleSelect = () => {
+    if (!disabled) {
+      context.onValueChange(value);
+      context.onOpenChange(false);
+    }
+  };
+  return (0, import_octane.createElement)(SelectItemContextProvider, {
+    scope: __scopeSelect,
+    value,
+    disabled,
+    textId,
+    isSelected,
+    onItemTextChange: (0, import_octane.useCallback)(
+      (node) => {
+        setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
+      },
+      [],
+      (0, import_internal.subSlot)(slot, "textChange")
+    ),
+    children: (0, import_octane.createElement)(Collection.ItemSlot, {
+      scope: __scopeSelect,
+      value,
+      disabled,
+      textValue,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        role: "option",
+        "aria-labelledby": textId,
+        "data-highlighted": isFocused ? "" : void 0,
+        // `isFocused` caveat fixes stuttering in VoiceOver
+        "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_compose_event_handlers.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
+        onBlur: (0, import_compose_event_handlers.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
+        onClick: (0, import_compose_event_handlers.composeEventHandlers)(itemProps.onClick, () => {
+          if (pointerTypeRef.current !== "mouse") handleSelect();
+        }),
+        onPointerUp: (0, import_compose_event_handlers.composeEventHandlers)(itemProps.onPointerUp, () => {
+          if (pointerTypeRef.current === "mouse") handleSelect();
+        }),
+        onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(itemProps.onPointerDown, (event) => {
+          pointerTypeRef.current = event.pointerType;
+        }),
+        onPointerMove: (0, import_compose_event_handlers.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_compose_event_handlers.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
+          if (event.currentTarget === document.activeElement) {
+            contentContext.onItemLeave?.();
+          }
+        }),
+        onKeyDown: (0, import_compose_event_handlers.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();
+        })
+      })
+    })
+  });
+}
+const ITEM_TEXT_NAME = "SelectItemText";
+function ItemText(props) {
+  const slot = (0, import_internal.S)("Select.ItemText");
+  const { __scopeSelect, className, style, ref: forwardedRef, ...itemTextProps } = props ?? {};
+  void className;
+  void style;
+  const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
+  const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
+  const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
+  const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
+  const [itemTextNode, setItemTextNode] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "node"));
+  const handleItemTextRefCallback = (0, import_use_callback_ref.useCallbackRef)(
+    (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled),
+    (0, import_internal.subSlot)(slot, "textRefCb")
+  );
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    setItemTextNode,
+    itemContext.onItemTextChange,
+    handleItemTextRefCallback,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const textContent = itemTextNode?.textContent;
+  const nativeOption = (0, import_octane.useMemo)(
+    () => (0, import_octane.createElement)("option", {
+      key: itemContext.value,
+      value: itemContext.value,
+      disabled: itemContext.disabled,
+      children: textContent
+    }),
+    [itemContext.disabled, itemContext.value, textContent],
+    (0, import_internal.subSlot)(slot, "option")
+  );
+  const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      onNativeOptionAdd(nativeOption);
+      return () => onNativeOptionRemove(nativeOption);
+    },
+    [onNativeOptionAdd, onNativeOptionRemove, nativeOption],
+    (0, import_internal.subSlot)(slot, "e:option")
+  );
+  return [
+    (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+      key: "text",
+      id: itemContext.textId,
+      ...itemTextProps,
+      ref: composedRefs
+    }),
+    // Portal the select item text into the trigger value node.
+    // When the value is empty we show the placeholder instead, so a
+    // selected "clear" item (empty value) must not portal its text.
+    // Keyed passthrough wrapper: a bare portal/null entry has no `key`, which
+    // would trip octane's one-time missing-key warning for array children.
+    (0, import_octane.createElement)(ValueFragment, {
+      key: "portal",
+      children: itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren && !shouldShowPlaceholder(context.value) ? (0, import_octane.createPortal)(itemTextProps.children, context.valueNode) : null
+    })
+  ];
+}
+const ITEM_INDICATOR_NAME = "SelectItemIndicator";
+function ItemIndicator(props) {
+  const { __scopeSelect, ...itemIndicatorProps } = props ?? {};
+  const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+  return itemContext.isSelected ? (0, import_octane.createElement)(import_Primitive.Primitive.span, { "aria-hidden": true, ...itemIndicatorProps }) : null;
+}
+const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
+function ScrollUpButton(props) {
+  const slot = (0, import_internal.S)("Select.ScrollUpButton");
+  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props?.__scopeSelect);
+  const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props?.__scopeSelect);
+  const [canScrollUp, setCanScrollUp] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "canScroll"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    props?.ref,
+    viewportContext.onScrollButtonChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (contentContext.viewport && contentContext.isPositioned) {
+        let handleScroll2 = function() {
+          const canScrollUp2 = viewport.scrollTop > 0;
+          setCanScrollUp(canScrollUp2);
+        };
+        var handleScroll = handleScroll2;
+        const viewport = contentContext.viewport;
+        handleScroll2();
+        viewport.addEventListener("scroll", handleScroll2);
+        return () => viewport.removeEventListener("scroll", handleScroll2);
+      }
+    },
+    [contentContext.viewport, contentContext.isPositioned],
+    (0, import_internal.subSlot)(slot, "e:scroll")
+  );
+  return canScrollUp ? (0, import_octane.createElement)(ScrollButtonImpl, {
+    ...props,
+    ref: composedRefs,
+    onAutoScroll: () => {
+      const { viewport, selectedItem } = contentContext;
+      if (viewport && selectedItem) {
+        viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
+      }
+    }
+  }) : null;
+}
+const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
+function ScrollDownButton(props) {
+  const slot = (0, import_internal.S)("Select.ScrollDownButton");
+  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props?.__scopeSelect);
+  const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props?.__scopeSelect);
+  const [canScrollDown, setCanScrollDown] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "canScroll"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    props?.ref,
+    viewportContext.onScrollButtonChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (contentContext.viewport && contentContext.isPositioned) {
+        let handleScroll2 = function() {
+          const maxScroll = viewport.scrollHeight - viewport.clientHeight;
+          const canScrollDown2 = Math.ceil(viewport.scrollTop) < maxScroll;
+          setCanScrollDown(canScrollDown2);
+        };
+        var handleScroll = handleScroll2;
+        const viewport = contentContext.viewport;
+        handleScroll2();
+        viewport.addEventListener("scroll", handleScroll2);
+        return () => viewport.removeEventListener("scroll", handleScroll2);
+      }
+    },
+    [contentContext.viewport, contentContext.isPositioned],
+    (0, import_internal.subSlot)(slot, "e:scroll")
+  );
+  return canScrollDown ? (0, import_octane.createElement)(ScrollButtonImpl, {
+    ...props,
+    ref: composedRefs,
+    onAutoScroll: () => {
+      const { viewport, selectedItem } = contentContext;
+      if (viewport && selectedItem) {
+        viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
+      }
+    }
+  }) : null;
+}
+function ScrollButtonImpl(props) {
+  const slot = (0, import_internal.S)("Select.ScrollButtonImpl");
+  const { __scopeSelect, onAutoScroll, ref: forwardedRef, ...scrollIndicatorProps } = props ?? {};
+  const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
+  const autoScrollTimerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "timer"));
+  const getItems = useCollection(__scopeSelect, (0, import_internal.subSlot)(slot, "items"));
+  const clearAutoScrollTimer = (0, import_octane.useCallback)(
+    () => {
+      if (autoScrollTimerRef.current !== null) {
+        window.clearInterval(autoScrollTimerRef.current);
+        autoScrollTimerRef.current = null;
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "clear")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      return () => clearAutoScrollTimer();
+    },
+    [clearAutoScrollTimer],
+    (0, import_internal.subSlot)(slot, "e:clear")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const activeItem = getItems().find(
+        (item) => item.ref.current === document.activeElement
+      );
+      activeItem?.ref.current?.scrollIntoView?.({ block: "nearest" });
+    },
+    [getItems],
+    (0, import_internal.subSlot)(slot, "e:intoView")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "aria-hidden": true,
+    ...scrollIndicatorProps,
+    ref: forwardedRef,
+    style: { flexShrink: 0, ...scrollIndicatorProps.style },
+    onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(scrollIndicatorProps.onPointerDown, () => {
+      if (autoScrollTimerRef.current === null) {
+        autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+      }
+    }),
+    onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(scrollIndicatorProps.onPointerMove, () => {
+      contentContext.onItemLeave?.();
+      if (autoScrollTimerRef.current === null) {
+        autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+      }
+    }),
+    onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(scrollIndicatorProps.onPointerLeave, () => {
+      clearAutoScrollTimer();
+    })
+  });
+}
+function Separator(props) {
+  const { __scopeSelect, ...separatorProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { "aria-hidden": true, ...separatorProps });
+}
+const ARROW_NAME = "SelectArrow";
+function Arrow(props) {
+  const slot = (0, import_internal.S)("Select.Arrow");
+  const { __scopeSelect, ...arrowProps } = props ?? {};
+  const popperScope = usePopperScope(__scopeSelect, (0, import_internal.subSlot)(slot, "popper"));
+  const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
+  return contentContext.position === "popper" ? (0, import_octane.createElement)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps }) : null;
+}
+const BUBBLE_INPUT_NAME = "SelectBubbleInput";
+function BubbleInput(props) {
+  const slot = (0, import_internal.S)("Select.BubbleInput");
+  const { __scopeSelect, ref: forwardedRef, ...selectProps } = props ?? {};
+  const context = useSelectContext(BUBBLE_INPUT_NAME, __scopeSelect);
+  const { value, onValueChange, required, disabled, name, autoComplete, form } = context;
+  const { nativeOptions } = context;
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const selectValue = value ?? "";
+  const prevValue = (0, import_use_previous.usePrevious)(selectValue, (0, import_internal.subSlot)(slot, "prev"));
+  const hasEmptyValueOption = Array.from(nativeOptions).some(
+    (option) => (option?.props?.value ?? "") === ""
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const select = ref.current;
+      if (!select) return;
+      if (prevValue !== selectValue) {
+        select.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    },
+    [prevValue, selectValue],
+    (0, import_internal.subSlot)(slot, "e:bubble")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.select, {
+    "aria-hidden": true,
+    required,
+    tabIndex: -1,
+    name,
+    autoComplete,
+    disabled,
+    form,
+    value: selectValue,
+    // React's synthetic onChange on a `<select>` is the native `change` event.
+    onChange: (event) => onValueChange(event.target.value),
+    ...selectProps,
+    style: { ...import_VisuallyHidden.VISUALLY_HIDDEN_STYLES, ...selectProps.style },
+    ref: composedRefs,
+    // All entries keyed, no null holes (a null entry would trip octane's one-time
+    // missing-key warning for array children): the placeholder option is simply
+    // omitted when not needed.
+    children: [
+      ...shouldShowPlaceholder(value) && !hasEmptyValueOption ? [(0, import_octane.createElement)("option", { key: "__placeholder", value: "" })] : [],
+      ...Array.from(nativeOptions)
+    ]
+  });
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function shouldShowPlaceholder(value) {
+  return value === "" || value === void 0;
+}
+function clamp(value, [min, max]) {
+  return Math.min(max, Math.max(min, value));
+}
+function useTypeaheadSearch(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("Select.useTypeaheadSearch");
+  const onSearchChange = user[0];
+  const handleSearchChange = (0, import_use_callback_ref.useCallbackRef)(onSearchChange, (0, import_internal.subSlot)(slot, "change"));
+  const searchRef = (0, import_octane.useRef)("", (0, import_internal.subSlot)(slot, "search"));
+  const timerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
+  const handleTypeaheadSearch = (0, import_octane.useCallback)(
+    (key) => {
+      const search = searchRef.current + key;
+      handleSearchChange(search);
+      (function updateSearch(value) {
+        searchRef.current = value;
+        window.clearTimeout(timerRef.current);
+        if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
+      })(search);
+    },
+    [handleSearchChange],
+    (0, import_internal.subSlot)(slot, "handle")
+  );
+  const resetTypeahead = (0, import_octane.useCallback)(
+    () => {
+      searchRef.current = "";
+      window.clearTimeout(timerRef.current);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "reset")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      return () => window.clearTimeout(timerRef.current);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:timer")
+  );
+  return [searchRef, handleTypeaheadSearch, resetTypeahead];
+}
+function findNextItem(items, search, currentItem) {
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const normalizedSearch = isRepeated ? search[0] : search;
+  const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
+  let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0));
+  const excludeCurrentItem = normalizedSearch.length === 1;
+  if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);
+  const nextItem = wrappedItems.find(
+    (item) => item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+  );
+  return nextItem !== currentItem ? nextItem : void 0;
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Arrow,
+  BubbleInput,
+  Content,
+  Group,
+  Icon,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Label,
+  Portal,
+  Provider,
+  Root,
+  ScrollDownButton,
+  ScrollUpButton,
+  Select,
+  SelectArrow,
+  SelectBubbleInput,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPortal,
+  SelectProvider,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  Separator,
+  Trigger,
+  Value,
+  Viewport,
+  createSelectScope
+});