@tamagui/select 1.0.1-beta.21 → 1.0.1-beta.211

package/dist/cjs/Select.js

@@ -1,39 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -46,406 +17,457 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {
   Select: () => Select,
-  SelectContent: () => SelectContent,
-  SelectGroup: () => SelectGroup,
+  SelectGroupFrame: () => SelectGroupFrame,
   SelectIcon: () => SelectIcon,
   SelectItem: () => SelectItem,
-  SelectItemIndicator: () => SelectItemIndicator,
-  SelectItemText: () => SelectItemText,
-  SelectLabel: () => SelectLabel,
-  SelectScrollDownButton: () => SelectScrollDownButton,
-  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectItemTextFrame: () => SelectItemTextFrame,
   SelectSeparator: () => SelectSeparator,
-  SelectTrigger: () => SelectTrigger,
-  SelectValue: () => SelectValue,
-  createSelectScope: () => createSelectScope
+  SelectSheetContents: () => SelectSheetContents,
+  SelectTrigger: () => SelectTrigger
 });
 module.exports = __toCommonJS(Select_exports);
-var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
-var import_react_use_previous = require("@radix-ui/react-use-previous");
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_core = require("@tamagui/core");
 var import_core2 = require("@tamagui/core");
-var import_create_context = require("@tamagui/create-context");
+var import_core3 = require("@tamagui/core");
+var import_list_item = require("@tamagui/list-item");
+var import_portal = require("@tamagui/portal");
 var import_separator = require("@tamagui/separator");
+var import_sheet = require("@tamagui/sheet");
 var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
 var import_use_controllable_state = require("@tamagui/use-controllable-state");
 var React = __toESM(require("react"));
-var ReactDOM = __toESM(require("react-dom"));
-const OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
-const SELECTION_KEYS = [" ", "Enter"];
-const SELECT_NAME = "Select";
-const WINDOW_PADDING = 8;
-const SCROLL_ARROW_VELOCITY = 8;
-const SCROLL_ARROW_THRESHOLD = 8;
-const MIN_HEIGHT = 80;
-const FALLBACK_THRESHOLD = 16;
-const [createSelectContext, createSelectScope] = (0, import_create_context.createContextScope)(SELECT_NAME);
-const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
-const Select = /* @__PURE__ */ __name((props) => {
-  const {
-    __scopeSelect,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    dir: dir2,
-    name,
-    autoComplete
-  } = props;
-  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: onOpenChange
-  });
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  const selectedIndexRef = React.useRef(null);
-  const activeIndexRef = React.useRef(null);
-  const prevActiveIndex = (0, import_react_use_previous.usePrevious)(activeIndex);
-  const [showArrows, setShowArrows] = React.useState(false);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const [selectedIndex, setSelectedIndex] = React.useState(Math.max(0, listContentRef.current.indexOf(value)));
-  (0, import_core.useIsomorphicLayoutEffect)(() => {
-    selectedIndexRef.current = selectedIndex;
-    activeIndexRef.current = activeIndex;
-  });
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
-  return /* @__PURE__ */ React.createElement(SelectProvider, {
-    scope: __scopeSelect,
-    open
-  }, children);
-}, "Select");
-Select.displayName = SELECT_NAME;
+var import_constants = require("./constants");
+var import_context = require("./context");
+var import_SelectContent = require("./SelectContent");
+var import_SelectImpl = require("./SelectImpl");
+var import_SelectScrollButton = require("./SelectScrollButton");
+var import_SelectViewport = require("./SelectViewport");
+var import_useSelectBreakpointActive = require("./useSelectBreakpointActive");
 const TRIGGER_NAME = "SelectTrigger";
-const SelectTrigger = React.forwardRef((props, forwardedRef) => {
-  const _a = props, {
-    __scopeSelect,
-    disabled = false,
-    "aria-labelledby": ariaLabelledby
-  } = _a, triggerProps = __objRest(_a, [
-    "__scopeSelect",
-    "disabled",
-    "aria-labelledby"
-  ]);
-  const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onTriggerChange);
-  const getItems = useCollection(__scopeSelect);
-  const handleOpen = /* @__PURE__ */ __name(() => {
-    if (!disabled) {
-      context.onOpenChange(true);
-      resetTypeahead();
-    }
-  }, "handleOpen");
-  return /* @__PURE__ */ React.createElement(Primitive.button, __spreadProps(__spreadValues({
-    type: "button",
-    role: "combobox",
-    "aria-controls": context.contentId,
-    "aria-expanded": context.open,
-    "aria-autocomplete": "none",
-    dir: context.dir,
-    disabled,
-    "data-disabled": disabled ? "" : void 0
-  }, triggerProps), {
-    ref: composedRefs,
-    onPointerDown: (0, import_core.composeEventHandlers)(triggerProps.onPointerDown, (event) => {
-      ;
-      event.target.releasePointerCapture(event.pointerId);
-      if (event.button === 0 && event.ctrlKey === false) {
-        handleOpen();
-        context.triggerPointerDownPosRef.current = {
-          x: Math.round(event.pageX),
-          y: Math.round(event.pageY)
-        };
-        event.preventDefault();
-      }
-    }),
-    onKeyDown: (0, import_core.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 SelectTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      disabled = false,
+      "aria-labelledby": ariaLabelledby,
+      ...triggerProps
+    } = props;
+    const context = (0, import_context.useSelectContext)(TRIGGER_NAME, __scopeSelect);
+    const labelledBy = ariaLabelledby;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_list_item.ListItem, {
+      componentName: TRIGGER_NAME,
+      backgrounded: true,
+      radiused: true,
+      hoverTheme: true,
+      pressTheme: true,
+      focusTheme: true,
+      focusable: true,
+      borderWidth: 1,
+      size: context.size,
+      "aria-expanded": context.open,
+      "aria-autocomplete": "none",
+      "aria-labelledby": labelledBy,
+      dir: context.dir,
+      disabled,
+      "data-disabled": disabled ? "" : void 0,
+      ...triggerProps,
+      ref: forwardedRef,
+      ...process.env.TAMAGUI_TARGET === "web" && context.interactions ? context.interactions.getReferenceProps() : {
+        onPress() {
+          context.setOpen(!context.open);
+        }
       }
-    })
-  }));
-});
+    });
+  }
+);
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
-const SelectValue = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, className, style } = _a, valueProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
-  return /* @__PURE__ */ React.createElement(import_stacks.XStack, __spreadProps(__spreadValues({}, valueProps), {
-    pointerEvents: "none"
-  }));
-});
-const ICON_NAME = "SelectIcon";
-const SelectIcon = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, children } = _a, iconProps = __objRest(_a, ["__scopeSelect", "children"]);
-  return /* @__PURE__ */ React.createElement(import_stacks.XStack, __spreadProps(__spreadValues({
-    "aria-hidden": true
-  }, iconProps), {
-    ref: forwardedRef
-  }), children || "\u25BC");
+const SelectValueFrame = (0, import_core2.styled)(import_text.Paragraph, {
+  name: VALUE_NAME,
+  selectable: false
 });
-SelectIcon.displayName = ICON_NAME;
-const CONTENT_NAME = "SelectContent";
-const SelectContent = React.forwardRef((props, forwardedRef) => {
-  const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);
-  return props.children;
-});
-const GROUP_NAME = "SelectGroup";
-const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect } = _a, groupProps = __objRest(_a, ["__scopeSelect"]);
-  const groupId = (0, import_core2.useId)();
-  return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
-    scope: __scopeSelect,
-    id: groupId
-  }, /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    role: "group",
-    "aria-labelledby": groupId
-  }, groupProps), {
-    ref: forwardedRef
-  })));
-});
-SelectGroup.displayName = GROUP_NAME;
-const LABEL_NAME = "SelectLabel";
-const SelectLabel = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect } = _a, labelProps = __objRest(_a, ["__scopeSelect"]);
-  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    id: groupContext.id
-  }, labelProps), {
-    ref: forwardedRef
-  }));
+const SelectValue = SelectValueFrame.extractable(
+  React.forwardRef(
+    ({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
+      const context = (0, import_context.useSelectContext)(VALUE_NAME, __scopeSelect);
+      const { onValueNodeHasChildrenChange } = context;
+      const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onValueNodeChange);
+      const children = childrenProp ?? context.selectedItem;
+      const hasChildren = !!children;
+      const selectValueChildren = context.value === void 0 && placeholder !== void 0 ? placeholder : children;
+      (0, import_core2.useIsomorphicLayoutEffect)(() => {
+        onValueNodeHasChildrenChange(hasChildren);
+      }, [onValueNodeHasChildrenChange, hasChildren]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValueFrame, {
+        size: context.size,
+        ref: composedRefs,
+        pointerEvents: "none",
+        children: selectValueChildren
+      });
+    }
+  )
+);
+SelectValue.displayName = VALUE_NAME;
+const SelectIcon = (0, import_core2.styled)(import_stacks.XStack, {
+  name: "SelectIcon",
+  "aria-hidden": true,
+  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Paragraph, {
+    children: "\u25BC"
+  })
 });
-SelectLabel.displayName = LABEL_NAME;
 const ITEM_NAME = "SelectItem";
-const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-const SelectItem = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, value, disabled = false, textValue: textValueProp } = _a, itemProps = __objRest(_a, ["__scopeSelect", "value", "disabled", "textValue"]);
-  const context = useSelectContext(ITEM_NAME, __scopeSelect);
-  const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
-  const isSelected = context.value === value;
-  const [textValue, setTextValue] = React.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React.useState(false);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, isSelected ? contentContext.onSelectedItemChange : void 0);
-  const textId = (0, import_core2.useId)();
-  const handleSelect = /* @__PURE__ */ __name(() => {
-    if (!disabled) {
-      context.onValueChange(value);
-      context.onOpenChange(false);
-    }
-  }, "handleSelect");
-  return /* @__PURE__ */ React.createElement(SelectItemContextProvider, {
-    scope: __scopeSelect,
-    value,
-    textId,
-    isSelected,
-    onItemTextChange: React.useCallback((node) => {
-      setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim());
-    }, [])
-  }, /* @__PURE__ */ React.createElement(Collection.ItemSlot, {
-    scope: __scopeSelect,
-    value,
-    disabled,
-    textValue
-  }, /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    role: "option",
-    "aria-labelledby": textId,
-    "aria-selected": isSelected && isFocused,
-    "data-state": isSelected ? "active" : "inactive",
-    "aria-disabled": disabled || void 0,
-    "data-disabled": disabled ? "" : void 0,
-    tabIndex: disabled ? void 0 : -1
-  }, itemProps), {
-    ref: composedRefs,
-    onFocus: (0, import_core.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
-    onBlur: (0, import_core.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
-    onPointerUp: (0, import_core.composeEventHandlers)(itemProps.onPointerUp, handleSelect),
-    onPointerMove: (0, import_core.composeEventHandlers)(itemProps.onPointerMove, (event) => {
-      if (disabled) {
-        contentContext.onItemLeave();
-      } else {
-        event.currentTarget.focus({ preventScroll: true });
+const [SelectItemContextProvider, useSelectItemContext] = (0, import_context.createSelectContext)(ITEM_NAME);
+const SelectItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      value,
+      disabled = false,
+      textValue: textValueProp,
+      index,
+      ...itemProps
+    } = props;
+    const context = (0, import_context.useSelectContext)(ITEM_NAME, __scopeSelect);
+    const isSelected = context.value === value;
+    const textId = (0, import_core3.useId)();
+    const {
+      selectedIndex,
+      setSelectedIndex,
+      listRef,
+      open,
+      setOpen,
+      onChange,
+      setActiveIndex,
+      allowMouseUpRef,
+      allowSelectRef,
+      setValueAtIndex,
+      selectTimeoutRef,
+      dataRef
+    } = context;
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => {
+      if (!import_core.isWeb)
+        return;
+      if (node instanceof HTMLElement) {
+        if (listRef) {
+          listRef.current[index] = node;
+        }
       }
-    }),
-    onPointerLeave: (0, import_core.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
-      if (event.currentTarget === document.activeElement) {
-        contentContext.onItemLeave();
+    });
+    React.useEffect(() => {
+      setValueAtIndex(index, value);
+    }, [index, setValueAtIndex, value]);
+    function handleSelect() {
+      setSelectedIndex(index);
+      onChange(value);
+      setOpen(false);
+    }
+    const selectItemProps = context.interactions ? context.interactions.getItemProps({
+      onTouchStart() {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = false;
+      },
+      onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " " && !(dataRef == null ? void 0 : dataRef.current.typing)) {
+          event.preventDefault();
+          handleSelect();
+        } else {
+          allowSelectRef.current = true;
+        }
+      },
+      onClick() {
+        if (allowSelectRef.current) {
+          setSelectedIndex(index);
+          setOpen(false);
+        }
+      },
+      onMouseUp() {
+        if (!allowMouseUpRef.current) {
+          return;
+        }
+        if (allowSelectRef.current) {
+          handleSelect();
+        }
+        clearTimeout(selectTimeoutRef.current);
+        selectTimeoutRef.current = setTimeout(() => {
+          allowSelectRef.current = true;
+        });
       }
-    }),
-    onKeyDown: (0, import_core.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();
-    })
-  }))));
-});
+    }) : {
+      onPress: handleSelect
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemContextProvider, {
+      scope: __scopeSelect,
+      value,
+      textId: textId || "",
+      isSelected,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_list_item.ListItem, {
+        backgrounded: true,
+        pressTheme: true,
+        cursor: "",
+        focusTheme: true,
+        componentName: ITEM_NAME,
+        ref: composedRefs,
+        "aria-labelledby": textId,
+        "aria-selected": isSelected,
+        "data-state": isSelected ? "active" : "inactive",
+        "aria-disabled": disabled || void 0,
+        "data-disabled": disabled ? "" : void 0,
+        tabIndex: disabled ? void 0 : -1,
+        size: context.size,
+        ...itemProps,
+        ...selectItemProps
+      })
+    });
+  }
+);
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
-const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  var _b;
-  const _a = props, { __scopeSelect, className, style } = _a, itemTextProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
-  const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
-  const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
-  const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, itemContext.onItemTextChange, itemContext.isSelected ? contentContext.onSelectedItemTextChange : void 0);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Primitive.span, __spreadProps(__spreadValues({
-    id: itemContext.textId
-  }, itemTextProps), {
-    ref: composedRefs
-  })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null, context.bubbleSelect ? ReactDOM.createPortal(/* @__PURE__ */ React.createElement("option", {
-    value: itemContext.value
-  }, (_b = ref.current) == null ? void 0 : _b.textContent), context.bubbleSelect) : null);
+const SelectItemTextFrame = (0, import_core2.styled)(import_text.Paragraph, {
+  name: ITEM_TEXT_NAME,
+  selectable: false
 });
+const SelectItemText = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, className, ...itemTextProps } = props;
+    const context = (0, import_context.useSelectContext)(ITEM_TEXT_NAME, __scopeSelect);
+    const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
+    const ref = React.useRef(null);
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+    const isSelected = Boolean(itemContext.isSelected && context.valueNode);
+    const contents = React.useMemo(
+      () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemTextFrame, {
+        className,
+        size: context.size,
+        id: itemContext.textId,
+        ...itemTextProps,
+        ref: composedRefs
+      }),
+      [props, context.size, className, itemContext.textId]
+    );
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents);
+      }
+    }, [isSelected, contents]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: contents
+    });
+  }
+);
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
-const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect } = _a, itemIndicatorProps = __objRest(_a, ["__scopeSelect"]);
-  const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ React.createElement(Primitive.span, __spreadProps(__spreadValues({
-    "aria-hidden": true
-  }, itemIndicatorProps), {
-    ref: forwardedRef
-  })) : null;
+const SelectItemIndicatorFrame = (0, import_core2.styled)(import_stacks.XStack, {
+  name: ITEM_TEXT_NAME
 });
+const SelectItemIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...itemIndicatorProps } = props;
+    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return itemContext.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemIndicatorFrame, {
+      "aria-hidden": true,
+      ...itemIndicatorProps,
+      ref: forwardedRef
+    }) : null;
+  }
+);
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
-const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
-  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React.useState(false);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentContext.onScrollButtonChange);
-  return canScrollUp ? /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({}, props), {
-    ref: composedRefs,
-    onAutoScroll: () => {
-      const { viewport, selectedItem } = contentContext;
-      if (viewport && selectedItem) {
-        viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
-      }
-    }
-  })) : null;
+const GROUP_NAME = "SelectGroup";
+const [SelectGroupContextProvider, useSelectGroupContext] = (0, import_context.createSelectContext)(GROUP_NAME);
+const SelectGroupFrame = (0, import_core2.styled)(import_stacks.YStack, {
+  name: GROUP_NAME,
+  width: "100%"
 });
-SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
-const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-const SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
-  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React.useState(false);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentContext.onScrollButtonChange);
-  return canScrollDown ? /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({}, props), {
-    ref: composedRefs,
-    onAutoScroll: () => {
-      const { viewport, selectedItem } = contentContext;
-      if (viewport && selectedItem) {
-        viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
-      }
-    }
-  })) : null;
+const SelectGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...groupProps } = props;
+    const groupId = (0, import_core3.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroupContextProvider, {
+      scope: __scopeSelect,
+      id: groupId || "",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroupFrame, {
+        role: "group",
+        "aria-labelledby": groupId,
+        ...groupProps,
+        ref: forwardedRef
+      })
+    });
+  }
+);
+SelectGroup.displayName = GROUP_NAME;
+const LABEL_NAME = "SelectLabel";
+const SelectLabel = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...labelProps } = props;
+    const context = (0, import_context.useSelectContext)(LABEL_NAME, __scopeSelect);
+    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_list_item.ListItem, {
+      componentName: LABEL_NAME,
+      fontWeight: "800",
+      id: groupContext.id,
+      size: context.size,
+      ...labelProps,
+      ref: forwardedRef
+    });
+  }
+);
+SelectLabel.displayName = LABEL_NAME;
+const SelectSeparator = (0, import_core2.styled)(import_separator.Separator, {
+  name: "SelectSeparator"
 });
-SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, onAutoScroll } = _a, scrollIndicatorProps = __objRest(_a, ["__scopeSelect", "onAutoScroll"]);
-  const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React.useRef(null);
-  const intervalRef = React.useRef();
-  const loopingRef = React.useRef(false);
-  const { x, y, reference, floating, strategy, update, refs } = (0, import_react_dom_interactions.useFloating)({
-    strategy: "fixed",
-    placement: dir === "up" ? "top" : "bottom",
-    middleware: [(0, import_react_dom_interactions.offset)(({ floating: floating2 }) => -floating2.height)]
-  });
-  return /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    "aria-hidden": true
-  }, scrollIndicatorProps), {
-    ref: forwardedRef,
-    style: __spreadValues({ flexShrink: 0 }, scrollIndicatorProps.style),
-    onPointerMove: (0, import_core.composeEventHandlers)(scrollIndicatorProps.onPointerMove, () => {
-      contentContext.onItemLeave();
-      if (autoScrollTimerRef.current === null) {
-        autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+const SelectSheetController = (props) => {
+  const context = (0, import_context.useSelectContext)("SelectSheetController", props.__scopeSelect);
+  const showSheet = (0, import_useSelectBreakpointActive.useShowSelectSheet)(context);
+  const breakpointActive = (0, import_useSelectBreakpointActive.useSelectBreakpointActive)(context.sheetBreakpoint);
+  const getShowSheet = (0, import_core2.useGet)(showSheet);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
+    onOpenChange: (val) => {
+      if (getShowSheet()) {
+        props.onOpenChange(val);
       }
-    }),
-    onPointerLeave: (0, import_core.composeEventHandlers)(scrollIndicatorProps.onPointerLeave, () => {
-      clearAutoScrollTimer();
-    })
-  }));
-});
-const SEPARATOR_NAME = "SelectSeparator";
-const SelectSeparator = import_separator.Separator;
-SelectSeparator.displayName = SEPARATOR_NAME;
-const BubbleSelect = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { value } = _a, selectProps = __objRest(_a, ["value"]);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  const prevValue = (0, import_react_use_previous.usePrevious)(value);
-  React.useEffect(() => {
-    const select = ref.current;
-    const selectProto = window.HTMLSelectElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
-    const setValue = descriptor.set;
-    if (prevValue !== value && setValue) {
-      const event = new Event("change", { bubbles: true });
-      setValue.call(select, value);
-      select.dispatchEvent(event);
-    }
-  }, [prevValue, value]);
-  return null;
-  return /* @__PURE__ */ React.createElement(VisuallyHidden, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement("select", __spreadProps(__spreadValues({}, selectProps), {
-    ref: composedRefs,
-    defaultValue: value
-  })));
-});
+    },
+    open: context.open,
+    hidden: breakpointActive === false,
+    children: props.children
+  });
+};
+const SHEET_CONTENTS_NAME = "SelectSheetContents";
+const SelectSheetContents = ({ __scopeSelect }) => {
+  const context = (0, import_context.useSelectContext)(SHEET_CONTENTS_NAME, __scopeSelect);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
+    name: `${context.scopeKey}SheetContents`
+  });
+};
+SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
+const SelectSheetImpl = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: props.children
+  });
+};
+const Select = (0, import_core2.withStaticProperties)(
+  (props) => {
+    const {
+      __scopeSelect,
+      children,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      size: sizeProp = "$4",
+      sheetBreakpoint = false,
+      dir
+    } = props;
+    const isSheet = (0, import_useSelectBreakpointActive.useSelectBreakpointActive)(sheetBreakpoint);
+    const SelectImpl = isSheet ? SelectSheetImpl : import_SelectImpl.SelectInlineImpl;
+    const forceUpdate = React.useReducer(() => ({}), {})[1];
+    const [selectedItem, setSelectedItem] = React.useState(null);
+    const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange: onOpenChange,
+      strategy: "most-recent-wins"
+    });
+    const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+      prop: valueProp,
+      defaultProp: defaultValue || "",
+      onChange: onValueChange,
+      strategy: "most-recent-wins"
+    });
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const selectedIndexRef = React.useRef(null);
+    const activeIndexRef = React.useRef(null);
+    const listContentRef = React.useRef([]);
+    const [selectedIndex, setSelectedIndex] = React.useState(
+      Math.max(0, listContentRef.current.indexOf(value))
+    );
+    const [valueNode, setValueNode] = React.useState(null);
+    const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
+    (0, import_core2.useIsomorphicLayoutEffect)(() => {
+      selectedIndexRef.current = selectedIndex;
+      activeIndexRef.current = activeIndex;
+    });
+    const id = (0, import_core3.useId)();
+    const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
+      dir,
+      blockSelection: false,
+      size: sizeProp,
+      fallback: false,
+      selectedItem,
+      setSelectedItem,
+      forceUpdate,
+      valueNode,
+      onValueNodeChange: setValueNode,
+      onValueNodeHasChildrenChange: setValueNodeHasChildren,
+      valueNodeHasChildren,
+      scopeKey,
+      sheetBreakpoint,
+      scope: __scopeSelect,
+      setValueAtIndex: (index, value2) => {
+        listContentRef.current[index] = value2;
+      },
+      activeIndex,
+      onChange: setValue,
+      selectedIndex,
+      setActiveIndex,
+      setOpen,
+      setSelectedIndex,
+      value,
+      open,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectSheetController, {
+        onOpenChange: setOpen,
+        __scopeSelect,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectImpl, {
+          activeIndexRef,
+          listContentRef,
+          selectedIndexRef,
+          ...props,
+          open,
+          value,
+          children
+        })
+      })
+    });
+  },
+  {
+    Content: import_SelectContent.SelectContent,
+    Group: SelectGroup,
+    Icon: SelectIcon,
+    Item: SelectItem,
+    ItemIndicator: SelectItemIndicator,
+    ItemText: SelectItemText,
+    Label: SelectLabel,
+    ScrollDownButton: import_SelectScrollButton.SelectScrollDownButton,
+    ScrollUpButton: import_SelectScrollButton.SelectScrollUpButton,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Viewport: import_SelectViewport.SelectViewport,
+    SheetContents: SelectSheetContents,
+    Sheet: import_sheet.ControlledSheet
+  }
+);
+Select.displayName = import_constants.SELECT_NAME;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Select,
-  SelectContent,
-  SelectGroup,
+  SelectGroupFrame,
   SelectIcon,
   SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
+  SelectItemTextFrame,
   SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  createSelectScope
+  SelectSheetContents,
+  SelectTrigger
 });
 //# sourceMappingURL=Select.js.map