@tamagui/select 1.0.1-beta.151 → 1.0.1-beta.154

package/dist/cjs/Select.js

@@ -17,7 +17,10 @@ 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, {
@@ -33,6 +36,7 @@ __export(Select_exports, {
   useShowSelectSheet: () => useShowSelectSheet
 });
 module.exports = __toCommonJS(Select_exports);
+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");
@@ -53,211 +57,232 @@ var import_SelectImpl = require("./SelectImpl");
 var import_SelectScrollButton = require("./SelectScrollButton");
 var import_SelectViewport = require("./SelectViewport");
 const TRIGGER_NAME = "SelectTrigger";
-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__ */ React.createElement(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);
+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 SelectValueFrame = (0, import_core2.styled)(import_text.Paragraph, {
   name: VALUE_NAME,
   selectable: false
 });
-const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
-  const context = (0, import_context.useSelectContext)(VALUE_NAME, __scopeSelect);
-  const { onValueNodeHasChildrenChange } = context;
-  const hasChildren = childrenProp !== void 0;
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onValueNodeChange);
-  (0, import_core2.useIsomorphicLayoutEffect)(() => {
-    onValueNodeHasChildrenChange(hasChildren);
-  }, [onValueNodeHasChildrenChange, hasChildren]);
-  const children = childrenProp ?? context.selectedItem;
-  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 = (0, import_context.useSelectContext)(VALUE_NAME, __scopeSelect);
+      const { onValueNodeHasChildrenChange } = context;
+      const hasChildren = childrenProp !== void 0;
+      const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onValueNodeChange);
+      (0, import_core2.useIsomorphicLayoutEffect)(() => {
+        onValueNodeHasChildrenChange(hasChildren);
+      }, [onValueNodeHasChildrenChange, hasChildren]);
+      const children = childrenProp ?? context.selectedItem;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValueFrame, {
+        size: context.size,
+        ref: composedRefs,
+        pointerEvents: "none",
+        children: context.value === void 0 && placeholder !== void 0 ? placeholder : children
+      });
+    }
+  )
+);
 SelectValue.displayName = VALUE_NAME;
 const SelectIcon = (0, import_core2.styled)(import_stacks.XStack, {
   name: "SelectIcon",
   "aria-hidden": true,
-  children: /* @__PURE__ */ React.createElement(import_text.Paragraph, null, "\u25BC")
+  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Paragraph, {
+    children: "\u25BC"
+  })
 });
 const ITEM_NAME = "SelectItem";
 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;
+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;
+        }
       }
+    });
+    React.useEffect(() => {
+      setValueAtIndex(index, value);
+    }, [index, setValueAtIndex, value]);
+    function handleSelect() {
+      setSelectedIndex(index);
+      onChange(value);
+      setOpen(false);
     }
-  });
-  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 {
+    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;
+        });
       }
-    },
-    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__ */ React.createElement(SelectItemContextProvider, {
-    scope: __scopeSelect,
-    value,
-    textId: textId || "",
-    isSelected
-  }, /* @__PURE__ */ React.createElement(import_list_item.ListItem, {
-    backgrounded: true,
-    pressTheme: true,
-    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
-  }));
-});
+    }) : {
+      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,
+        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 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 = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
-  const contents = /* @__PURE__ */ React.createElement(SelectItemTextFrame, {
-    className,
-    size: context.size,
-    id: itemContext.textId,
-    ...itemTextProps,
-    ref: composedRefs
-  });
-  if (!import_core.isWeb) {
-    React.useEffect(() => {
-      if (isSelected) {
-        context.setSelectedItem(contents);
-      }
-    }, [isSelected]);
+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 = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemTextFrame, {
+      className,
+      size: context.size,
+      id: itemContext.textId,
+      ...itemTextProps,
+      ref: composedRefs
+    });
+    if (!import_core.isWeb) {
+      React.useEffect(() => {
+        if (isSelected) {
+          context.setSelectedItem(contents);
+        }
+      }, [isSelected]);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [
+        contents,
+        import_core.isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null
+      ]
+    });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, contents, import_core.isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
-});
+);
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
 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__ */ React.createElement(SelectItemIndicatorFrame, {
-    "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__ */ (0, import_jsx_runtime.jsx)(SelectItemIndicatorFrame, {
+      "aria-hidden": true,
+      ...itemIndicatorProps,
+      ref: forwardedRef
+    }) : null;
+  }
+);
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
 const [SelectGroupContextProvider, useSelectGroupContext] = (0, import_context.createSelectContext)(GROUP_NAME);
@@ -265,34 +290,39 @@ const SelectGroupFrame = (0, import_core2.styled)(import_stacks.YStack, {
   name: GROUP_NAME,
   width: "100%"
 });
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...groupProps } = props;
-  const groupId = (0, import_core3.useId)();
-  return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
-    scope: __scopeSelect,
-    id: groupId || ""
-  }, /* @__PURE__ */ React.createElement(SelectGroupFrame, {
-    role: "group",
-    "aria-labelledby": groupId,
-    ...groupProps,
-    ref: forwardedRef
-  }));
-});
+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__ */ React.createElement(import_list_item.ListItem, {
-    componentName: LABEL_NAME,
-    fontWeight: "800",
-    id: groupContext.id,
-    size: context.size,
-    ...labelProps,
-    ref: forwardedRef
-  });
-});
+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"
@@ -310,121 +340,132 @@ const SelectSheetController = (props) => {
   const showSheet = useShowSelectSheet(context);
   const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
   const getShowSheet = (0, import_core2.useGet)(showSheet);
-  return /* @__PURE__ */ React.createElement(import_sheet.SheetController, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
     onChangeOpen: (val) => {
       if (getShowSheet()) {
         props.onChangeOpen(val);
       }
     },
     open: context.open,
-    hidden: breakpointActive === false
-  }, props.children);
+    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__ */ React.createElement(import_portal.PortalHost, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
     name: `${context.scopeKey}SheetContents`
   });
 };
 SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
 const SelectSheetImpl = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, 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 = 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"
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: props.children
   });
-  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;
-  });
-  return /* @__PURE__ */ React.createElement(import_context.SelectProvider, {
-    dir,
-    blockSelection: false,
-    size: sizeProp,
-    fallback: false,
-    selectedItem,
-    setSelectedItem,
-    forceUpdate,
-    valueNode,
-    onValueNodeChange: setValueNode,
-    onValueNodeHasChildrenChange: setValueNodeHasChildren,
-    valueNodeHasChildren,
-    scopeKey: __scopeSelect ? Object.keys(__scopeSelect)[0] : "",
-    sheetBreakpoint,
-    scope: __scopeSelect,
-    setValueAtIndex: (index, value2) => {
-      listContentRef.current[index] = value2;
-    },
-    activeIndex,
-    onChange: setValue,
-    selectedIndex,
-    setActiveIndex,
-    setOpen,
-    setSelectedIndex,
-    value,
-    open
-  }, /* @__PURE__ */ React.createElement(SelectSheetController, {
-    onChangeOpen: setOpen,
-    __scopeSelect
-  }, /* @__PURE__ */ React.createElement(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.Sheet
-});
+};
+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 = 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;
+    });
+    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: __scopeSelect ? Object.keys(__scopeSelect)[0] : "",
+      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, {
+        onChangeOpen: 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.Sheet
+  }
+);
 Select.displayName = import_constants.SELECT_NAME;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {