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

package/dist/esm/SelectViewport.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SelectViewport.tsx"],
   "sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { useSelectBreakpointActive } from './Select'\nimport { ScopedProps, SelectViewportProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n  name: VIEWPORT_NAME,\n  backgroundColor: '$background',\n  elevate: true,\n  bordered: true,\n  overflow: 'scroll',\n  userSelect: 'none',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$2',\n  },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n    const { __scopeSelect, children, ...viewportProps } = props\n    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n    if (breakpointActive || !isWeb) {\n      return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n    }\n\n    if (!context.floatingContext) {\n      return null\n    }\n\n    if (!context.open) {\n      return children\n    }\n\n    const {\n      style: { scrollbarWidth, listStyleType, ...restStyle },\n      ...floatingProps\n    } = context.interactions!.getFloatingProps()\n\n    return (\n      <>\n        <style\n          dangerouslySetInnerHTML={{\n            __html: selectViewportCSS,\n          }}\n        />\n        <FloatingFocusManager context={context.floatingContext} preventTabbing>\n          <SelectViewportFrame\n            size={context.size}\n            // @ts-ignore\n            role=\"presentation\"\n            {...viewportProps}\n            ref={forwardedRef}\n            {...floatingProps}\n            {...restStyle}\n          >\n            {children}\n          </SelectViewportFrame>\n        </FloatingFocusManager>\n      </>\n    )\n  }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n\nconst selectViewportCSS = `\n.is_SelectViewport {\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n}\n\n.is_SelectViewport::-webkit-scrollbar{\n  display:none\n}\n`\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAOO,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,eAAe,aAAa,kBAAkB;AACtD,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAE1E,MAAI,oBAAoB,CAAC,OAAO;AAC9B,WAAO,oCAAC;AAAA,MAAW,UAAU,GAAG,QAAQ;AAAA,OAA0B,QAAS;AAAA,EAC7E;AAEA,MAAI,CAAC,QAAQ,iBAAiB;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,MAAM;AACjB,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,kBAAkB;AAAA,OACxC;AAAA,MACD,QAAQ,aAAc,iBAAiB;AAE3C,SACE,0DACE,oCAAC;AAAA,IACC,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,GACF,GACA,oCAAC;AAAA,IAAqB,SAAS,QAAQ;AAAA,IAAiB,gBAAc;AAAA,KACpE,oCAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IAEd,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,KAAK;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,QACH,CACF,CACF;AAEJ,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AA8Ca,SAiBP,UAjBO,KAiBP,YAjBO;AA9Cb,SAAS,4BAA4B;AACrC,SAAyB,aAAa;AACtC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAOnC,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,eAAe,aAAa,cAAc,IAAI;AACtD,UAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,UAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAE1E,QAAI,oBAAoB,CAAC,OAAO;AAC9B,aAAO,oBAAC;AAAA,QAAW,UAAU,GAAG,QAAQ;AAAA,QAA0B;AAAA,OAAS;AAAA,IAC7E;AAEA,QAAI,CAAC,QAAQ,iBAAiB;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,QAAQ,MAAM;AACjB,aAAO;AAAA,IACT;AAEA,UAAM;AAAA,MACJ,OAAO,EAAE,gBAAgB,kBAAkB,UAAU;AAAA,SAClD;AAAA,IACL,IAAI,QAAQ,aAAc,iBAAiB;AAE3C,WACE;AAAA,MACE;AAAA,4BAAC;AAAA,UACC,yBAAyB;AAAA,YACvB,QAAQ;AAAA,UACV;AAAA,SACF;AAAA,QACA,oBAAC;AAAA,UAAqB,SAAS,QAAQ;AAAA,UAAiB,gBAAc;AAAA,UACpE,8BAAC;AAAA,YACC,MAAM,QAAQ;AAAA,YAEd,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ,KAAK;AAAA,YACJ,GAAG;AAAA,YACH,GAAG;AAAA,YAEH;AAAA,WACH;AAAA,SACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/SelectViewport.native.js

@@ -1,13 +1,14 @@
+import { jsx } from "react/jsx-runtime";
 import { PortalItem } from "@tamagui/portal";
-import * as React from "react";
 import { VIEWPORT_NAME } from "./constants";
 import { useSelectContext } from "./context";
 const SelectViewport = (props) => {
   const { __scopeSelect, children } = props;
   const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
-  return /* @__PURE__ */ React.createElement(PortalItem, {
-    hostName: `${context.scopeKey}SheetContents`
-  }, children);
+  return /* @__PURE__ */ jsx(PortalItem, {
+    hostName: `${context.scopeKey}SheetContents`,
+    children
+  });
 };
 SelectViewport.displayName = VIEWPORT_NAME;
 export {

package/dist/esm/SelectViewport.native.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/SelectViewport.native.tsx"],
   "sourcesContent": ["import { PortalItem } from '@tamagui/portal'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectViewportProps } from './types'\n\nexport const SelectViewport = (props: ScopedProps<SelectViewportProps>) => {\n  const { __scopeSelect, children } = props\n  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n  return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n}\n\nSelectViewport.displayName = VIEWPORT_NAME\n"],
-  "mappings": "AAAA;AACA;AAEA;AACA;AAGO,MAAM,iBAAiB,CAAC,UAA4C;AACzE,QAAM,EAAE,eAAe,aAAa;AACpC,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,SAAO,oCAAC;AAAA,IAAW,UAAU,GAAG,QAAQ;AAAA,KAA0B,QAAS;AAC7E;AAEA,eAAe,cAAc;",
+  "mappings": "AAUS;AAVT,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,iBAAiB,CAAC,UAA4C;AACzE,QAAM,EAAE,eAAe,SAAS,IAAI;AACpC,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,SAAO,oBAAC;AAAA,IAAW,UAAU,GAAG,QAAQ;AAAA,IAA0B;AAAA,GAAS;AAC7E;AAEA,eAAe,cAAc;",
   "names": []
 }

package/dist/esm/context.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/context.tsx"],
   "sourcesContent": ["import { createContextScope } from '@tamagui/create-context'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectContextValue } from './types'\n\nexport const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)\n\nexport const [SelectProvider, useSelectContext] =\n  createSelectContext<SelectContextValue>(SELECT_NAME)\n"],
-  "mappings": "AAAA;AAEA;AAGO,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,oBAC5B,oBAAwC,WAAW;",
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB;AAGrB,MAAM,CAAC,qBAAqB,iBAAiB,IAAI,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,gBAAgB,IAC5C,oBAAwC,WAAW;",
   "names": []
 }

package/dist/esm/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.tsx"],
   "sourcesContent": ["export * from './Select'\nexport type {\n  SelectContentProps,\n  SelectProps,\n  SelectScrollButtonProps,\n  SelectViewportProps,\n} from './types'\nexport * from './context'\n"],
-  "mappings": "AAAA;AAOA;",
+  "mappings": "AAAA,cAAc;AAOd,cAAc;",
   "names": []
 }

package/dist/jsx/BubbleSelect.js

@@ -1,22 +1,24 @@
 import { usePrevious } from "@radix-ui/react-use-previous";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import * as React from "react";
-const BubbleSelect = React.forwardRef((props, forwardedRef) => {
-  const { value, ...selectProps } = props;
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const prevValue = 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;
-});
+const BubbleSelect = React.forwardRef(
+  (props, forwardedRef) => {
+    const { value, ...selectProps } = props;
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const prevValue = 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;
+  }
+);
 //# sourceMappingURL=BubbleSelect.js.map

package/dist/jsx/BubbleSelect.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/BubbleSelect.tsx"],
   "sourcesContent": ["import { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\n/* -----------------------------------------------------------------------------------------------*/\nconst BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWithoutRef<'select'>>(\n  (props, forwardedRef) => {\n    const { value, ...selectProps } = props\n    const ref = React.useRef<HTMLSelectElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const prevValue = usePrevious(value)\n\n    // Bubble value change to parents (e.g form change event)\n    React.useEffect(() => {\n      const select = ref.current!\n      const selectProto = window.HTMLSelectElement.prototype\n      const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value') as PropertyDescriptor\n      const setValue = descriptor.set\n      if (prevValue !== value && setValue) {\n        const event = new Event('change', { bubbles: true })\n        setValue.call(select, value)\n        select.dispatchEvent(event)\n      }\n    }, [prevValue, value])\n\n    /**\n     * We purposefully use a `select` here to support form autofill as much\n     * as possible.\n     *\n     * We purposefully do not add the `value` attribute here to allow the value\n     * to be set programatically and bubble to any parent form `onChange` event.\n     * Adding the `value` will cause React to consider the programatic\n     * dispatch a duplicate and it will get swallowed.\n     *\n     * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n     * won't work otherwise.\n     */\n    // TODO\n    return null\n    // return (\n    //   <VisuallyHidden asChild>\n    //     <select {...selectProps} ref={composedRefs} defaultValue={value} />\n    //   </VisuallyHidden>\n    // )\n  }\n)\n"],
-  "mappings": "AAAA;AACA;AACA;AAGA,MAAM,eAAe,MAAM,WACzB,CAAC,OAAO,iBAAiB;AACvB,QAAM,EAAE,UAAU,gBAAgB;AAClC,QAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,QAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,QAAM,YAAY,YAAY,KAAK;AAGnC,QAAM,UAAU,MAAM;AACpB,UAAM,SAAS,IAAI;AACnB,UAAM,cAAc,OAAO,kBAAkB;AAC7C,UAAM,aAAa,OAAO,yBAAyB,aAAa,OAAO;AACvE,UAAM,WAAW,WAAW;AAC5B,QAAI,cAAc,SAAS,UAAU;AACnC,YAAM,QAAQ,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC;AACnD,eAAS,KAAK,QAAQ,KAAK;AAC3B,aAAO,cAAc,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAerB,SAAO;AAMT,CACF;",
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,YAAY,WAAW;AAGvB,MAAM,eAAe,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,UAAU,YAAY,IAAI;AAClC,UAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,UAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,UAAM,YAAY,YAAY,KAAK;AAGnC,UAAM,UAAU,MAAM;AACpB,YAAM,SAAS,IAAI;AACnB,YAAM,cAAc,OAAO,kBAAkB;AAC7C,YAAM,aAAa,OAAO,yBAAyB,aAAa,OAAO;AACvE,YAAM,WAAW,WAAW;AAC5B,UAAI,cAAc,SAAS,UAAU;AACnC,cAAM,QAAQ,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC;AACnD,iBAAS,KAAK,QAAQ,KAAK;AAC3B,eAAO,cAAc,KAAK;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAerB,WAAO;AAAA,EAMT;AACF;",
   "names": []
 }

package/dist/jsx/Select.js

@@ -18,38 +18,44 @@ import { SelectInlineImpl } from "./SelectImpl";
 import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
 import { SelectViewport } from "./SelectViewport";
 const TRIGGER_NAME = "SelectTrigger";
-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 <ListItem componentName={TRIGGER_NAME} backgrounded radiused hoverTheme pressTheme focusTheme focusable borderWidth={1} size={context.size} aria-expanded={context.open} aria-autocomplete="none" aria-labelledby={labelledBy} dir={context.dir} disabled={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 = useSelectContext(TRIGGER_NAME, __scopeSelect);
+    const labelledBy = ariaLabelledby;
+    return <ListItem componentName={TRIGGER_NAME} backgrounded radiused hoverTheme pressTheme focusTheme focusable borderWidth={1} size={context.size} aria-expanded={context.open} aria-autocomplete="none" aria-labelledby={labelledBy} dir={context.dir} disabled={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: childrenProp, placeholder }, forwardedRef) => {
-  const context = useSelectContext(VALUE_NAME, __scopeSelect);
-  const { onValueNodeHasChildrenChange } = context;
-  const hasChildren = childrenProp !== void 0;
-  const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
-  useIsomorphicLayoutEffect(() => {
-    onValueNodeHasChildrenChange(hasChildren);
-  }, [onValueNodeHasChildrenChange, hasChildren]);
-  const children = childrenProp ?? context.selectedItem;
-  return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{context.value === void 0 && placeholder !== void 0 ? placeholder : children}</SelectValueFrame>;
-}));
+const SelectValue = SelectValueFrame.extractable(
+  React.forwardRef(
+    ({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
+      const context = useSelectContext(VALUE_NAME, __scopeSelect);
+      const { onValueNodeHasChildrenChange } = context;
+      const hasChildren = childrenProp !== void 0;
+      const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
+      useIsomorphicLayoutEffect(() => {
+        onValueNodeHasChildrenChange(hasChildren);
+      }, [onValueNodeHasChildrenChange, hasChildren]);
+      const children = childrenProp ?? context.selectedItem;
+      return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{context.value === void 0 && placeholder !== void 0 ? placeholder : children}</SelectValueFrame>;
+    }
+  )
+);
 SelectValue.displayName = VALUE_NAME;
 const SelectIcon = styled(XStack, {
   name: "SelectIcon",
@@ -58,121 +64,127 @@ const SelectIcon = styled(XStack, {
 });
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-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;
+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;
+        }
       }
+    });
+    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?.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?.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 <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected}><ListItem backgrounded pressTheme focusTheme 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} /></SelectItemContextProvider>;
-});
+    }) : {
+      onPress: handleSelect
+    };
+    return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected}><ListItem backgrounded pressTheme focusTheme 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} /></SelectItemContextProvider>;
+  }
+);
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
 const SelectItemTextFrame = styled(Paragraph, {
   name: ITEM_TEXT_NAME,
   selectable: false
 });
-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 = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
-  const contents = <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />;
-  if (!isWeb) {
-    React.useEffect(() => {
-      if (isSelected) {
-        context.setSelectedItem(contents);
-      }
-    }, [isSelected]);
+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 = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
+    const contents = <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />;
+    if (!isWeb) {
+      React.useEffect(() => {
+        if (isSelected) {
+          context.setSelectedItem(contents);
+        }
+      }, [isSelected]);
+    }
+    return <>
+      {contents}
+      {isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
+    </>;
   }
-  return <>
-    {contents}
-    {isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
-  </>;
-});
+);
 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 { __scopeSelect, ...itemIndicatorProps } = props;
-  const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
-});
+const SelectItemIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...itemIndicatorProps } = props;
+    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return itemContext.isSelected ? <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
+  }
+);
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
 const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
@@ -180,19 +192,23 @@ const SelectGroupFrame = styled(YStack, {
   name: GROUP_NAME,
   width: "100%"
 });
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...groupProps } = props;
-  const groupId = useId();
-  return <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ""}><SelectGroupFrame role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
-});
+const SelectGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...groupProps } = props;
+    const groupId = useId();
+    return <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ""}><SelectGroupFrame role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
+  }
+);
 SelectGroup.displayName = GROUP_NAME;
 const LABEL_NAME = "SelectLabel";
-const SelectLabel = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...labelProps } = props;
-  const context = useSelectContext(LABEL_NAME, __scopeSelect);
-  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return <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 = useSelectContext(LABEL_NAME, __scopeSelect);
+    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} size={context.size} {...labelProps} ref={forwardedRef} />;
+  }
+);
 SelectLabel.displayName = LABEL_NAME;
 const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
@@ -225,66 +241,71 @@ SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
 const SelectSheetImpl = (props) => {
   return <>{props.children}</>;
 };
-const Select = 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 : 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;
-  });
-  return <SelectProvider dir={dir} blockSelection={false} size={sizeProp} fallback={false} selectedItem={selectedItem} setSelectedItem={setSelectedItem} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ""} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
-    listContentRef.current[index] = value2;
-  }} activeIndex={activeIndex} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}><SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider>;
-}, {
-  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
-});
+const Select = 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 : 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;
+    });
+    return <SelectProvider dir={dir} blockSelection={false} size={sizeProp} fallback={false} selectedItem={selectedItem} setSelectedItem={setSelectedItem} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ""} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
+      listContentRef.current[index] = value2;
+    }} activeIndex={activeIndex} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}><SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider>;
+  },
+  {
+    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
+  }
+);
 Select.displayName = SELECT_NAME;
 export {
   Select,