@tamagui/select 1.0.1-beta.99 → 1.0.1-rc.0

package/dist/esm/Select.js

@@ -1,326 +1,251 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-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 __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;
-};
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  autoUpdate,
-  detectOverflow,
-  flip,
-  offset,
-  size,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useListNavigation,
-  useRole,
-  useTypeahead
-} from "@floating-ui/react-dom-interactions";
-import { usePrevious } from "@radix-ui/react-use-previous";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import {
-  Theme,
-  styled,
-  useIsomorphicLayoutEffect,
-  useThemeName,
-  withStaticProperties
-} from "@tamagui/core";
+import { isWeb } from "@tamagui/core";
+import { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from "@tamagui/core";
 import { useId } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
 import { ListItem } from "@tamagui/list-item";
+import { PortalHost } from "@tamagui/portal";
 import { Separator } from "@tamagui/separator";
-import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
-import { Paragraph } from "@tamagui/text";
+import { ControlledSheet, SheetController } from "@tamagui/sheet";
+import { XStack, YStack } from "@tamagui/stacks";
+import { Paragraph, SizableText } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-const userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
-const isFirefox = userAgent.toLowerCase().includes("firefox");
-if (isFirefox) {
-  document.body.classList.add("firefox");
-}
-function getVisualOffsetTop() {
-  return !/^((?!chrome|android).)*safari/i.test(userAgent) ? (visualViewport == null ? void 0 : visualViewport.offsetTop) ?? 0 : 0;
-}
-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] = createContextScope(SELECT_NAME);
-const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
+import { SELECT_NAME } from "./constants";
+import { SelectProvider, createSelectContext, useSelectContext } from "./context";
+import { SelectContent } from "./SelectContent";
+import { SelectInlineImpl } from "./SelectImpl";
+import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
+import { SelectViewport } from "./SelectViewport";
+import { useSelectBreakpointActive, useShowSelectSheet } from "./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);
-  return /* @__PURE__ */ React.createElement(ListItem, __spreadValues(__spreadProps(__spreadValues({
-    backgrounded: true,
-    radiused: true,
-    hoverTheme: true,
-    pressTheme: true,
-    focusTheme: true,
-    focusable: false,
-    borderWidth: 1,
-    componentName: TRIGGER_NAME,
-    size: context.size,
-    "aria-expanded": context.open,
-    "aria-autocomplete": "none",
-    disabled,
-    "data-disabled": disabled ? "" : void 0
-  }, triggerProps), {
-    ref: forwardedRef
-  }), context.interactions.getReferenceProps()));
-});
+const SelectTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      disabled = false,
+      "aria-labelledby": ariaLabelledby,
+      ...triggerProps
+    } = props;
+    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+    const labelledBy = ariaLabelledby;
+    return /* @__PURE__ */ jsx(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 SelectValueFrame = styled(Paragraph, {
   name: VALUE_NAME,
   selectable: false
 });
-const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children, placeholder }, forwardedRef) => {
-  const context = useSelectContext(VALUE_NAME, __scopeSelect);
-  const { onValueNodeHasChildrenChange } = context;
-  const hasChildren = children !== void 0;
-  const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
-  React.useLayoutEffect(() => {
-    onValueNodeHasChildrenChange(hasChildren);
-  }, [onValueNodeHasChildrenChange, hasChildren]);
-  return /* @__PURE__ */ React.createElement(SelectValueFrame, {
-    size: context.size,
-    ref: composedRefs,
-    pointerEvents: "none"
-  }, context.value === void 0 && placeholder !== void 0 ? placeholder : children);
-}));
+const SelectValue = SelectValueFrame.extractable(
+  React.forwardRef(
+    ({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
+      const context = useSelectContext(VALUE_NAME, __scopeSelect);
+      const { onValueNodeHasChildrenChange } = context;
+      const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
+      const children = childrenProp ?? context.selectedItem;
+      const hasChildren = !!children;
+      const selectValueChildren = context.value === void 0 && placeholder !== void 0 ? placeholder : children;
+      useIsomorphicLayoutEffect(() => {
+        onValueNodeHasChildrenChange(hasChildren);
+      }, [onValueNodeHasChildrenChange, hasChildren]);
+      return /* @__PURE__ */ jsx(SelectValueFrame, {
+        size: context.size,
+        ref: composedRefs,
+        pointerEvents: "none",
+        children: selectValueChildren
+      });
+    }
+  )
+);
 SelectValue.displayName = VALUE_NAME;
 const SelectIcon = styled(XStack, {
   name: "SelectIcon",
   "aria-hidden": true,
-  children: /* @__PURE__ */ React.createElement(Paragraph, null, "\u25BC")
-});
-const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
-  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
-  const themeName = useThemeName();
-  const contents = /* @__PURE__ */ React.createElement(Theme, {
-    name: themeName
-  }, children);
-  return /* @__PURE__ */ React.createElement(FloatingPortal, null, context.open ? /* @__PURE__ */ React.createElement(FloatingOverlay, {
-    lockScroll: true
-  }, contents) : /* @__PURE__ */ React.createElement("div", {
-    style: { display: "none" }
-  }, contents));
-};
-const VIEWPORT_NAME = "SelectViewport";
-const SelectViewportFrame = styled(ThemeableStack, {
-  name: VIEWPORT_NAME,
-  backgroundColor: "$background",
-  elevate: true,
-  bordered: true,
-  overflow: "scroll",
-  userSelect: "none",
-  variants: {
-    size: {
-      "...size": (val, { tokens }) => {
-        return {
-          borderRadius: tokens.radius[val] ?? val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$2"
-  }
-});
-const SelectViewport = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, children } = _a, viewportProps = __objRest(_a, ["__scopeSelect", "children"]);
-  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
-  const _b = context.interactions.getFloatingProps(), { style } = _b, floatingProps = __objRest(_b, ["style"]);
-  delete style["scrollbarWidth"];
-  delete style["listStyleType"];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`
-    }
-  }), /* @__PURE__ */ React.createElement(FloatingFocusManager, {
-    context: context.floatingContext,
-    preventTabbing: true
-  }, /* @__PURE__ */ React.createElement(SelectViewportFrame, __spreadValues(__spreadValues(__spreadProps(__spreadValues({
-    size: context.size,
-    "data-tamagui-select-viewport": "",
-    role: "presentation"
-  }, viewportProps), {
-    ref: forwardedRef
-  }), floatingProps), style), children)));
+  children: /* @__PURE__ */ jsx(Paragraph, {
+    children: "\u25BC"
+  })
 });
-SelectViewport.displayName = VIEWPORT_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,
-    index
-  } = _a, itemProps = __objRest(_a, [
-    "__scopeSelect",
-    "value",
-    "disabled",
-    "textValue",
-    "index"
-  ]);
-  const context = useSelectContext(ITEM_NAME, __scopeSelect);
-  const isSelected = context.value === value;
-  const [textValue, setTextValue] = React.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React.useState(false);
-  const textId = useId();
-  const {
-    selectedIndex,
-    setSelectedIndex,
-    listRef,
-    open,
-    setOpen,
-    onChange,
-    activeIndex,
-    setActiveIndex,
-    setValueAtIndex,
-    dataRef
-  } = context;
-  const composedRefs = useComposedRefs(forwardedRef, (node) => {
-    if (node instanceof HTMLElement) {
-      listRef.current[index] = node;
-    }
-  });
-  React.useEffect(() => {
-    setValueAtIndex(index, value);
-  }, [index]);
-  const timeoutRef = React.useRef();
-  const [allowMouseUp, setAllowMouseUp] = React.useState(false);
-  function handleSelect() {
-    setSelectedIndex(index);
-    onChange(value);
-    setOpen(false);
-  }
-  React.useLayoutEffect(() => {
-    clearTimeout(timeoutRef.current);
-    if (open) {
-      if (selectedIndex !== index) {
-        setAllowMouseUp(true);
-      } else {
-        timeoutRef.current = setTimeout(() => {
-          setAllowMouseUp(true);
-        }, 300);
+const SelectItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      value,
+      disabled = false,
+      textValue: textValueProp,
+      index,
+      ...itemProps
+    } = props;
+    const context = useSelectContext(ITEM_NAME, __scopeSelect);
+    const isSelected = context.value === value;
+    const textId = useId();
+    const {
+      selectedIndex,
+      setSelectedIndex,
+      listRef,
+      open,
+      setOpen,
+      onChange,
+      setActiveIndex,
+      allowMouseUpRef,
+      allowSelectRef,
+      setValueAtIndex,
+      selectTimeoutRef,
+      dataRef
+    } = context;
+    const composedRefs = useComposedRefs(forwardedRef, (node) => {
+      if (!isWeb)
+        return;
+      if (node instanceof HTMLElement) {
+        if (listRef) {
+          listRef.current[index] = node;
+        }
       }
-    } else {
-      setAllowMouseUp(false);
-    }
-  }, [open, index, setActiveIndex, selectedIndex]);
-  function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " " && !dataRef.current.typing) {
-      event.preventDefault();
-      handleSelect();
+    });
+    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;
+        });
+      }
+    }) : {
+      onPress: handleSelect
+    };
+    return /* @__PURE__ */ jsx(SelectItemContextProvider, {
+      scope: __scopeSelect,
+      value,
+      textId: textId || "",
+      isSelected,
+      children: /* @__PURE__ */ jsx(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
+      })
+    });
   }
-  const selectItemProps = context.interactions.getItemProps({
-    onClick: allowMouseUp ? handleSelect : void 0,
-    onMouseUp: allowMouseUp ? handleSelect : void 0,
-    onKeyDown: handleKeyDown
-  });
-  return /* @__PURE__ */ React.createElement(SelectItemContextProvider, {
-    scope: __scopeSelect,
-    value,
-    textId: textId || "",
-    isSelected,
-    onItemTextChange: React.useCallback((node) => {
-      setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim());
-    }, [])
-  }, /* @__PURE__ */ React.createElement(ListItem, __spreadValues(__spreadValues({
-    backgrounded: true,
-    pressTheme: true,
-    focusTheme: true,
-    componentName: ITEM_NAME,
-    ref: composedRefs,
-    "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,
-    size: context.size
-  }, itemProps), selectItemProps)));
-});
+);
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
-const SelectItemTextFrame = styled(Paragraph, {
+const SelectItemTextFrame = styled(SizableText, {
   name: ITEM_TEXT_NAME,
   selectable: false
 });
-const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, className, style } = _a, itemTextProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
-  const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
-  const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectItemTextFrame, __spreadProps(__spreadValues({
-    size: context.size,
-    id: itemContext.textId
-  }, itemTextProps), {
-    ref: composedRefs
-  })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
-});
+const SelectItemText = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, className, ...itemTextProps } = props;
+    const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
+    const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const isSelected = Boolean(itemContext.isSelected && context.valueNode);
+    const contents = React.useMemo(
+      () => /* @__PURE__ */ 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__ */ jsx(Fragment, {
+      children: contents
+    });
+  }
+);
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
 const SelectItemIndicatorFrame = styled(XStack, {
   name: ITEM_TEXT_NAME
 });
-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(SelectItemIndicatorFrame, __spreadProps(__spreadValues({
-    "aria-hidden": true
-  }, itemIndicatorProps), {
-    ref: forwardedRef
-  })) : null;
-});
+const SelectItemIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...itemIndicatorProps } = props;
+    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return itemContext.isSelected ? /* @__PURE__ */ jsx(SelectItemIndicatorFrame, {
+      "aria-hidden": true,
+      ...itemIndicatorProps,
+      ref: forwardedRef
+    }) : null;
+  }
+);
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
 const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
@@ -328,529 +253,182 @@ const SelectGroupFrame = styled(YStack, {
   name: GROUP_NAME,
   width: "100%"
 });
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect } = _a, groupProps = __objRest(_a, ["__scopeSelect"]);
-  const groupId = useId();
-  return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
-    scope: __scopeSelect,
-    id: groupId || ""
-  }, /* @__PURE__ */ React.createElement(SelectGroupFrame, __spreadProps(__spreadValues({
-    role: "group",
-    "aria-labelledby": groupId
-  }, groupProps), {
-    ref: forwardedRef
-  })));
-});
+const SelectGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...groupProps } = props;
+    const groupId = useId();
+    return /* @__PURE__ */ jsx(SelectGroupContextProvider, {
+      scope: __scopeSelect,
+      id: groupId || "",
+      children: /* @__PURE__ */ 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 _a = props, { __scopeSelect } = _a, labelProps = __objRest(_a, ["__scopeSelect"]);
-  const context = useSelectContext(LABEL_NAME, __scopeSelect);
-  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ React.createElement(ListItem, __spreadProps(__spreadValues({
-    componentName: LABEL_NAME,
-    fontWeight: "800",
-    id: groupContext.id,
-    size: context.size
-  }, labelProps), {
-    ref: forwardedRef
-  }));
-});
-SelectLabel.displayName = LABEL_NAME;
-const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({
-    componentName: SCROLL_UP_BUTTON_NAME
-  }, props), {
-    dir: "up",
-    ref: forwardedRef
-  }));
-});
-SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
-const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-const SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({
-    componentName: SCROLL_DOWN_BUTTON_NAME
-  }, props), {
-    dir: "down",
-    ref: forwardedRef
-  }));
-});
-SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
-  var _c;
-  const _a = props, { __scopeSelect, dir, componentName } = _a, scrollIndicatorProps = __objRest(_a, ["__scopeSelect", "dir", "componentName"]);
-  const _b = useSelectContext(componentName, __scopeSelect), { floatingRef, increaseHeight, forceUpdate } = _b, context = __objRest(_b, ["floatingRef", "increaseHeight", "forceUpdate"]);
-  const intervalRef = React.useRef();
-  const loopingRef = React.useRef(false);
-  const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
-  const { x, y, reference, floating, strategy, update, refs } = useFloating({
-    strategy: "fixed",
-    placement: dir === "up" ? "top" : "bottom",
-    middleware: [offset(({ rects }) => -rects.floating.height)]
-  });
-  const composedRefs = useComposedRefs(forwardedRef, floating);
-  React.useLayoutEffect(() => {
-    reference(floatingRef.current);
-  }, [reference, floatingRef.current]);
-  React.useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current || !isVisible) {
-      return;
-    }
-    const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-      animationFrame: true
+const SelectLabel = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...labelProps } = props;
+    const context = useSelectContext(LABEL_NAME, __scopeSelect);
+    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return /* @__PURE__ */ jsx(ListItem, {
+      componentName: LABEL_NAME,
+      fontWeight: "800",
+      id: groupContext.id,
+      size: context.size,
+      ...labelProps,
+      ref: forwardedRef
     });
-    return () => {
-      clearInterval(intervalRef.current);
-      loopingRef.current = false;
-      cleanup();
-    };
-  }, [isVisible, update, refs.floating, refs.reference]);
-  if (!isVisible) {
-    return null;
   }
-  const handleScrollArrowChange = () => {
-    const floating2 = floatingRef.current;
-    const isUp = dir === "up";
-    if (floating2) {
-      const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY;
-      const multi = isUp && floating2.scrollTop <= SCROLL_ARROW_THRESHOLD * 2 || !isUp && floating2.scrollTop >= floating2.scrollHeight - floating2.clientHeight - SCROLL_ARROW_THRESHOLD * 2 ? 2 : 1;
-      floating2.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY);
-      increaseHeight(floating2, multi === 2 ? value * 2 : value);
-      forceUpdate();
-    }
-  };
-  return /* @__PURE__ */ React.createElement(YStack, __spreadProps(__spreadValues({
-    ref: composedRefs,
-    componentName,
-    "aria-hidden": true
-  }, scrollIndicatorProps), {
-    zIndex: 1e3,
-    position: strategy,
-    left: x || 0,
-    top: y || 0,
-    width: `calc(${(((_c = floatingRef.current) == null ? void 0 : _c.offsetWidth) ?? 0) - 2}px)`,
-    onPointerMove: () => {
-      if (!loopingRef.current) {
-        intervalRef.current = setInterval(handleScrollArrowChange, 1e3 / 60);
-        loopingRef.current = true;
-      }
-    },
-    onPointerLeave: () => {
-      loopingRef.current = false;
-      clearInterval(intervalRef.current);
-    }
-  }));
-});
+);
+SelectLabel.displayName = LABEL_NAME;
 const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
 });
-const Select = withStaticProperties((props) => {
-  const {
-    id,
-    __scopeSelect,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    size: sizeProp,
-    dir,
-    name,
-    autoComplete
-  } = props;
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: onOpenChange
+const SelectSheetController = (props) => {
+  const context = useSelectContext("SelectSheetController", props.__scopeSelect);
+  const showSheet = useShowSelectSheet(context);
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  const getShowSheet = useGet(showSheet);
+  return /* @__PURE__ */ jsx(SheetController, {
+    onOpenChange: (val) => {
+      if (getShowSheet()) {
+        props.onOpenChange(val);
+      }
+    },
+    open: context.open,
+    hidden: breakpointActive === false,
+    children: props.children
   });
-  const [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
+};
+const SHEET_CONTENTS_NAME = "SelectSheetContents";
+const SelectSheetContents = ({ __scopeSelect }) => {
+  const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect);
+  return /* @__PURE__ */ jsx(PortalHost, {
+    name: `${context.scopeKey}SheetContents`
   });
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const selectedIndexRef = React.useRef(null);
-  const activeIndexRef = React.useRef(null);
-  const prevActiveIndex = usePrevious(activeIndex);
-  const [showArrows, setShowArrows] = React.useState(false);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const listItemsRef = React.useRef([]);
-  const listContentRef = React.useRef([]);
-  const [selectedIndex, setSelectedIndex] = React.useState(Math.max(0, listContentRef.current.indexOf(value)));
-  const [controlledScrolling, setControlledScrolling] = React.useState(false);
-  const [middlewareType, setMiddlewareType] = React.useState("align");
-  useIsomorphicLayoutEffect(() => {
-    selectedIndexRef.current = selectedIndex;
-    activeIndexRef.current = activeIndex;
+};
+SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
+const SelectSheetImpl = (props) => {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: props.children
   });
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
+};
+const Select = withStaticProperties(
+  (props) => {
+    const {
+      __scopeSelect,
+      children,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      size: sizeProp = "$4",
+      dir
+    } = props;
+    const { when, AdaptProvider } = useAdaptParent({
+      Contents: SelectSheetContents
     });
-    return () => {
-      cancelAnimationFrame(frame);
-    };
-  }, [open]);
-  function getFloatingPadding(floating2) {
-    var _a;
-    if (!floating2) {
-      return 0;
-    }
-    return Number((_a = getComputedStyle(floating2).paddingLeft) == null ? void 0 : _a.replace("px", ""));
-  }
-  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } = useFloating({
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    middleware: middlewareType === "align" ? [
-      offset(({ rects }) => {
-        const index = activeIndexRef.current ?? selectedIndexRef.current;
-        if (index == null) {
-          return 0;
-        }
-        const item = listItemsRef.current[index];
-        if (item == null) {
-          return 0;
-        }
-        const offsetTop = item.offsetTop;
-        const itemHeight = item.offsetHeight;
-        const height = rects.reference.height;
-        return -offsetTop - height - (itemHeight - height) / 2;
-      }),
-      {
-        name: "size",
-        async fn(args) {
-          var _a;
-          const {
-            elements: { floating: floating2 },
-            rects: { reference: reference2 },
-            middlewareData: middlewareData2
-          } = args;
-          const overflow = await detectOverflow(args, {
-            padding: WINDOW_PADDING
-          });
-          const top = Math.max(0, overflow.top);
-          const bottom = Math.max(0, overflow.bottom);
-          const nextY = args.y + top;
-          if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
-            return {
-              y: nextY,
-              data: {
-                y: middlewareData2.size.y
-              }
-            };
-          }
-          Object.assign(floating2.style, {
-            maxHeight: `${floating2.scrollHeight - Math.abs(top + bottom)}px`,
-            minWidth: `${reference2.width + getFloatingPadding(floating2) * 2}px`
-          });
-          return {
-            y: nextY,
-            data: {
-              y: top,
-              skip: true
-            },
-            reset: {
-              rects: true
-            }
-          };
-        }
-      }
-    ] : [
-      offset(5),
-      flip(),
-      size({
-        apply({ rects, availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            maxHeight: `${availableHeight}px`
-          });
+    const sheetBreakpoint = when || false;
+    const isSheet = useSelectBreakpointActive(sheetBreakpoint);
+    const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl;
+    const forceUpdate = React.useReducer(() => ({}), {})[1];
+    const [selectedItem, setSelectedItem] = React.useState(null);
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange: onOpenChange,
+      strategy: "most-recent-wins"
+    });
+    const [value, setValue] = 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);
+    useIsomorphicLayoutEffect(() => {
+      selectedIndexRef.current = selectedIndex;
+      activeIndexRef.current = activeIndex;
+    });
+    const id = useId();
+    const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id;
+    return /* @__PURE__ */ jsx(AdaptProvider, {
+      children: /* @__PURE__ */ jsx(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;
         },
-        padding: WINDOW_PADDING
+        activeIndex,
+        onChange: setValue,
+        selectedIndex,
+        setActiveIndex,
+        setOpen,
+        setSelectedIndex,
+        value,
+        open,
+        children: /* @__PURE__ */ jsx(SelectSheetController, {
+          onOpenChange: setOpen,
+          __scopeSelect,
+          children: /* @__PURE__ */ jsx(SelectImpl, {
+            activeIndexRef,
+            listContentRef,
+            selectedIndexRef,
+            ...props,
+            open,
+            value,
+            children
+          })
+        })
       })
-    ]
-  });
-  const floatingRef = refs.floating;
-  const forceUpdate = React.useReducer(() => ({}), {})[1];
-  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
-  const interactions = useInteractions([
-    useClick(context, { pointerDown: true }),
-    useRole(context, { role: "listbox" }),
-    useDismiss(context),
-    useListNavigation(context, {
-      listRef: listItemsRef,
-      activeIndex,
-      selectedIndex,
-      onNavigate: setActiveIndex
-    }),
-    useTypeahead(context, {
-      listRef: listContentRef,
-      onMatch: open ? setActiveIndex : setSelectedIndex,
-      selectedIndex,
-      activeIndex
-    })
-  ]);
-  const increaseHeight = React.useCallback((floating2, amount = 0) => {
-    if (middlewareType === "fallback") {
-      return;
-    }
-    const currentMaxHeight = Number(floating2.style.maxHeight.replace("px", ""));
-    const currentTop = Number(floating2.style.top.replace("px", ""));
-    const rect = floating2.getBoundingClientRect();
-    const rectTop = rect.top;
-    const rectBottom = rect.bottom;
-    const viewportHeight = (visualViewport == null ? void 0 : visualViewport.height) ?? 0;
-    const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2;
-    if (amount < 0 && selectedIndexRef.current != null && Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)) {
-      floating2.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`;
-    }
-    if (amount > 0 && Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) && floating2.scrollHeight > floating2.offsetHeight) {
-      const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount);
-      const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount);
-      Object.assign(floating2.style, {
-        maxHeight: `${nextMaxHeight}px`,
-        top: `${nextTop}px`
-      });
-      if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
-        floating2.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating2);
-      }
-      return currentTop - nextTop;
-    }
-  }, [middlewareType]);
-  const touchPageYRef = React.useRef(null);
-  const handleWheel = React.useCallback((event) => {
-    var _a;
-    const pinching = event.ctrlKey;
-    const currentTarget = event.currentTarget;
-    function isWheelEvent(event2) {
-      return typeof event2.deltaY === "number";
-    }
-    function isTouchEvent(event2) {
-      return event2.touches != null;
-    }
-    if (Math.abs(((currentTarget == null ? void 0 : currentTarget.offsetHeight) ?? 0) - (((visualViewport == null ? void 0 : visualViewport.height) ?? 0) - WINDOW_PADDING * 2)) > 1 && !pinching) {
-      event.preventDefault();
-    } else if (isWheelEvent(event) && isFirefox) {
-      currentTarget.scrollTop += event.deltaY;
-    }
-    if (!pinching) {
-      let delta = 5;
-      if (isTouchEvent(event)) {
-        const currentPageY = touchPageYRef.current;
-        const pageY = (_a = event.touches[0]) == null ? void 0 : _a.pageY;
-        if (pageY != null) {
-          touchPageYRef.current = pageY;
-          if (currentPageY != null) {
-            delta = currentPageY - pageY;
-          }
-        }
-      }
-      increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta);
-      setScrollTop(currentTarget.scrollTop);
-      forceUpdate();
-    }
-  }, [increaseHeight, forceUpdate]);
-  React.useEffect(() => {
-    function onTouchEnd() {
-      touchPageYRef.current = null;
-    }
-    const floating2 = floatingRef.current;
-    if (open && floating2 && middlewareType === "align") {
-      floating2.addEventListener("wheel", handleWheel);
-      floating2.addEventListener("touchmove", handleWheel);
-      floating2.addEventListener("touchend", onTouchEnd, { passive: true });
-      return () => {
-        floating2.removeEventListener("wheel", handleWheel);
-        floating2.removeEventListener("touchmove", handleWheel);
-        floating2.removeEventListener("touchend", onTouchEnd);
-      };
-    }
-  }, [open, floatingRef, handleWheel, middlewareType]);
-  React.useEffect(() => {
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-    };
-  }, [update]);
-  React.useLayoutEffect(() => {
-    var _a;
-    const floating2 = floatingRef.current;
-    if (open && controlledScrolling && floating2) {
-      const item = activeIndex != null ? listItemsRef.current[activeIndex] : selectedIndex != null ? listItemsRef.current[selectedIndex] : null;
-      if (item && prevActiveIndex != null) {
-        const itemHeight = ((_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) ?? 0;
-        const floatingHeight = floating2.offsetHeight;
-        const top = item.offsetTop;
-        const bottom = top + itemHeight;
-        if (top < floating2.scrollTop + 20) {
-          const diff = floating2.scrollTop - top + 20;
-          floating2.scrollTop -= diff;
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            increaseHeight(floating2, -diff);
-          }
-        } else if (bottom > floatingHeight + floating2.scrollTop - 20) {
-          const diff = bottom - floatingHeight - floating2.scrollTop + 20;
-          floating2.scrollTop += diff;
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            floating2.scrollTop -= increaseHeight(floating2, diff) ?? 0;
-          }
-        }
-      }
-    }
-  }, [
-    open,
-    controlledScrolling,
-    prevActiveIndex,
-    activeIndex,
-    selectedIndex,
-    floatingRef,
-    increaseHeight
-  ]);
-  React.useLayoutEffect(() => {
-    var _a;
-    const floating2 = refs.floating.current;
-    const reference2 = refs.reference.current;
-    if (open && floating2 && reference2 && floating2.offsetHeight < floating2.scrollHeight) {
-      const referenceRect = reference2.getBoundingClientRect();
-      if (middlewareType === "fallback") {
-        const item = listItemsRef.current[selectedIndex];
-        if (item) {
-          floating2.scrollTop = item.offsetTop - floating2.clientHeight + referenceRect.height;
-        }
-        return;
-      }
-      floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
-      const closeToBottom = ((visualViewport == null ? void 0 : visualViewport.height) ?? 0) + getVisualOffsetTop() - referenceRect.bottom < FALLBACK_THRESHOLD;
-      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD;
-      if (floating2.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
-        setMiddlewareType("fallback");
-      }
-    }
-  }, [
-    open,
-    increaseHeight,
-    selectedIndex,
-    middlewareType,
-    refs.floating,
-    refs.reference,
-    middlewareData
-  ]);
-  React.useLayoutEffect(() => {
-    if (open && selectedIndex != null) {
-      requestAnimationFrame(() => {
-        var _a;
-        (_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.focus({ preventScroll: true });
-      });
-    }
-  }, [listItemsRef, selectedIndex, open]);
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
     });
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  const [valueNode, setValueNode] = React.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(SelectProvider, {
-    size: sizeProp,
-    scope: __scopeSelect,
-    increaseHeight,
-    forceUpdate,
-    floatingRef,
-    valueNode,
-    onValueNodeChange: setValueNode,
-    valueNodeHasChildren,
-    onValueNodeHasChildrenChange: setValueNodeHasChildren,
-    setValueAtIndex: (index, value2) => {
-      listContentRef.current[index] = value2;
-    },
-    interactions: __spreadProps(__spreadValues({}, interactions), {
-      getReferenceProps() {
-        return interactions.getReferenceProps({
-          ref: reference,
-          className: "SelectTrigger",
-          onKeyDown(event) {
-            if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
-              event.preventDefault();
-              setOpen(true);
-            }
-          }
-        });
-      },
-      getFloatingProps(props2) {
-        return interactions.getFloatingProps(__spreadProps(__spreadValues({
-          ref: floating,
-          className: "Select"
-        }, props2), {
-          style: __spreadValues({
-            position: strategy,
-            top: y ?? "",
-            left: x ?? "",
-            outline: 0,
-            listStyleType: "none",
-            scrollbarWidth: "none",
-            userSelect: "none"
-          }, props2 == null ? void 0 : props2.style),
-          onPointerEnter() {
-            setControlledScrolling(false);
-          },
-          onPointerMove() {
-            setControlledScrolling(false);
-          },
-          onKeyDown() {
-            setControlledScrolling(true);
-          },
-          onScroll(event) {
-            setScrollTop(event.currentTarget.scrollTop);
-          }
-        }));
-      }
-    }),
-    floatingContext: context,
-    activeIndex,
-    canScrollDown: !!showDownArrow,
-    canScrollUp: !!showUpArrow,
-    controlledScrolling: true,
-    dataRef: context.dataRef,
-    listRef: listItemsRef,
-    onChange: setValue,
-    selectedIndex,
-    setActiveIndex,
-    setOpen,
-    setSelectedIndex,
-    value,
-    open
-  }, children);
-}, {
-  Content: SelectContent,
-  Group: SelectGroup,
-  Icon: SelectIcon,
-  Item: SelectItem,
-  ItemIndicator: SelectItemIndicator,
-  ItemText: SelectItemText,
-  Label: SelectLabel,
-  ScrollDownButton: SelectScrollDownButton,
-  ScrollUpButton: SelectScrollUpButton,
-  Trigger: SelectTrigger,
-  Value: SelectValue,
-  Viewport: SelectViewport
-});
+  },
+  {
+    Adapt,
+    Content: SelectContent,
+    Group: SelectGroup,
+    Icon: SelectIcon,
+    Item: SelectItem,
+    ItemIndicator: SelectItemIndicator,
+    ItemText: SelectItemText,
+    Label: SelectLabel,
+    ScrollDownButton: SelectScrollDownButton,
+    ScrollUpButton: SelectScrollUpButton,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Viewport: SelectViewport,
+    SheetContents: SelectSheetContents,
+    Sheet: ControlledSheet
+  }
+);
 Select.displayName = SELECT_NAME;
 export {
   Select,
@@ -859,9 +437,7 @@ export {
   SelectItem,
   SelectItemTextFrame,
   SelectSeparator,
-  SelectTrigger,
-  SelectViewport,
-  SelectViewportFrame,
-  createSelectScope
+  SelectSheetContents,
+  SelectTrigger
 };
 //# sourceMappingURL=Select.js.map