@ecohouse/ui 0.1.52 → 0.1.54

package/dist/index.cjs

@@ -27561,7 +27561,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal3(children, containerInfo, implementation) {
+        function createPortal4(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28417,7 +28417,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal3(children, container, null, key);
+          return createPortal4(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -34246,6 +34246,16 @@ var DEFAULT_MONTH_NAMES = [
   "\u0534\u0565\u056F\u057F\u0565\u0574\u0562\u0565\u0580"
 ];
 var DEFAULT_WEEKDAY_LABELS = ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\u0540\u0546", "\u0548\u0552\u0550", "\u0547\u0532", "\u053F\u0550"];
+function rangeIncludesUnavailable(start, end, isUnavailable) {
+  const cursor = startOfDay(start);
+  const last = startOfDay(end);
+  const step = isBefore(last, cursor) ? -1 : 1;
+  while (true) {
+    if (isUnavailable(cursor)) return true;
+    if (isSameDay(cursor, last)) return false;
+    cursor.setDate(cursor.getDate() + step);
+  }
+}
 var EMPTY_RANGE = { start: null, end: null };
 var DEFAULT_WIDTH = 320;
 var DEFAULT_MENU_HEIGHT = 388;
@@ -34299,6 +34309,9 @@ var DatePicker = react.forwardRef(
       closeOnSelect = true,
       minDate,
       maxDate,
+      unavailableDates,
+      unavailableDateLabel = "Booked",
+      blockUnavailableDates = false,
       defaultVisibleMonth,
       monthNames = DEFAULT_MONTH_NAMES,
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
@@ -34317,6 +34330,17 @@ var DatePicker = react.forwardRef(
       onValueChange: _onValueChange,
       ...rest
     } = props;
+    const unavailableDayKeys = react.useMemo(() => {
+      const keys = /* @__PURE__ */ new Set();
+      for (const date of unavailableDates ?? []) {
+        keys.add(startOfDay(date).getTime());
+      }
+      return keys;
+    }, [unavailableDates]);
+    const isUnavailable = react.useCallback(
+      (day) => unavailableDayKeys.has(startOfDay(day).getTime()),
+      [unavailableDayKeys]
+    );
     const isRange = props.range === true;
     const usesRangeTrigger = isRange && variant !== "default";
     const formatValue = formatValueProp ?? (usesRangeTrigger ? (date) => formatDateDayShortMonth(date, monthNames) : formatDate);
@@ -34419,6 +34443,7 @@ var DatePicker = react.forwardRef(
     const handleDayPress = react.useCallback(
       (day) => {
         if (disabled || isDateDisabled(day, minDate, maxDate)) return;
+        if (blockUnavailableDates && isUnavailable(day)) return;
         const picked = startOfDay(day);
         if (!isRange) {
           if (!isValueControlled) setUncontrolledSingle(picked);
@@ -34429,14 +34454,19 @@ var DatePicker = react.forwardRef(
         const { start, end } = rangeValue;
         const startingNewRange = !start || start && end;
         const nextRange = startingNewRange ? { start: picked, end: null } : isBefore(picked, start) ? { start: picked, end: null } : { start, end: picked };
+        if (blockUnavailableDates && nextRange.start && nextRange.end && rangeIncludesUnavailable(nextRange.start, nextRange.end, isUnavailable)) {
+          return;
+        }
         if (!isValueControlled) setUncontrolledRange(nextRange);
         props.onValueChange?.(nextRange);
         if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
       },
       [
+        blockUnavailableDates,
         closeOnSelect,
         disabled,
         isRange,
+        isUnavailable,
         isValueControlled,
         maxDate,
         minDate,
@@ -34515,7 +34545,8 @@ var DatePicker = react.forwardRef(
                 styles26.menu,
                 usesRangeTrigger && styles26.rangeMenu,
                 hideTrigger ? styles26.menuInline : menuAlignEnd ? styles26.menuAlignEnd : styles26.menuAlignStart,
-                calendarStyle
+                calendarStyle,
+                styles26.menuFitContent
               ],
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles26.calendarHeader, children: [
@@ -34547,7 +34578,7 @@ var DatePicker = react.forwardRef(
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles26.calendarGrid, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles26.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles26.weekdayCell, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles26.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
                   weeks.map((week, weekIndex) => {
                     let rangeHighlightStyle = null;
@@ -34602,24 +34633,26 @@ var DatePicker = react.forwardRef(
                             const isRangeStart = isRange && isSameDay(day, rangeValue.start);
                             const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
                             const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
+                            const dayUnavailable = isUnavailable(day);
+                            const dayBlocked = blockUnavailableDates && dayUnavailable;
                             const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
                             const dayKey = startOfDay(day).getTime();
-                            const isHovered = !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
+                            const isHovered = !dayDisabled && !dayBlocked && !isSelectedEndpoint && hoveredDayKey === dayKey;
                             const dayTextColor = isSelectedEndpoint ? colors.white : dayDisabled ? colors.grey400 : isToday ? colors.primary : !inCurrentMonth ? colors.grey300 : colors.white;
                             return /* @__PURE__ */ jsxRuntime.jsxs(
                               reactNative.Pressable,
                               {
                                 onPress: () => handleDayPress(day),
-                                disabled: dayDisabled,
+                                disabled: dayDisabled || dayBlocked,
                                 onHoverIn: () => setHoveredDayKey(dayKey),
                                 onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                                 onPressIn: () => setHoveredDayKey(dayKey),
                                 onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                                 style: styles26.dayCellWrap,
                                 accessibilityRole: "button",
-                                accessibilityLabel: formatValue(day),
+                                accessibilityLabel: dayUnavailable ? `${formatValue(day)}, ${unavailableDateLabel}` : formatValue(day),
                                 accessibilityState: {
-                                  disabled: dayDisabled,
+                                  disabled: dayDisabled || dayBlocked,
                                   selected: isSelectedEndpoint
                                 },
                                 children: [
@@ -34629,9 +34662,20 @@ var DatePicker = react.forwardRef(
                                       style: [
                                         styles26.dayCircle,
                                         isSelectedEndpoint && styles26.dayCircleSelected,
+                                        dayUnavailable && styles26.dayCircleBooked,
                                         isHovered && styles26.dayCircleHovered
                                       ],
-                                      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles26.dayText, { color: dayTextColor }], children: day.getDate() })
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                                        reactNative.Text,
+                                        {
+                                          style: [
+                                            styles26.dayText,
+                                            { color: dayTextColor },
+                                            dayUnavailable && styles26.dayTextBooked
+                                          ],
+                                          children: day.getDate()
+                                        }
+                                      )
                                     }
                                   ),
                                   isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles26.todayDot }) : null
@@ -34769,7 +34813,7 @@ var styles26 = reactNative.StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    width: DEFAULT_WIDTH,
+    alignSelf: "flex-start",
     height: DEFAULT_MENU_HEIGHT,
     marginTop: 8,
     zIndex: 10,
@@ -34803,10 +34847,26 @@ var styles26 = reactNative.StyleSheet.create({
     right: "auto",
     marginTop: 0
   },
-  rangeMenu: {
-    width: RANGE_TRIGGER_WIDTH
+  rangeMenu: {},
+  menuFitContent: {
+    width: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    maxWidth: MENU_CONTENT_WIDTH + MENU_PADDING * 2,
+    alignSelf: "flex-start",
+    alignItems: "flex-start",
+    ...reactNative.Platform.select({
+      web: {
+        width: "fit-content",
+        maxWidth: "fit-content"
+      },
+      default: {}
+    })
+  },
+  calendarGrid: {
+    width: MENU_CONTENT_WIDTH,
+    alignSelf: "flex-start"
   },
   calendarHeader: {
+    width: MENU_CONTENT_WIDTH,
     height: HEADER_HEIGHT3,
     paddingTop: 8,
     paddingBottom: 8,
@@ -34840,9 +34900,8 @@ var styles26 = reactNative.StyleSheet.create({
   weekdayCell: {
     width: DAY_CELL_WIDTH,
     height: WEEKDAY_ROW_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -34870,9 +34929,8 @@ var styles26 = reactNative.StyleSheet.create({
   dayCellWrap: {
     width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: 0,
+    flexGrow: 0,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
     opacity: 1
@@ -34889,6 +34947,12 @@ var styles26 = reactNative.StyleSheet.create({
   dayCircleSelected: {
     backgroundColor: colors.primary
   },
+  dayCircleBooked: {
+    backgroundColor: colors.grey700
+  },
+  dayTextBooked: {
+    textDecorationLine: "line-through"
+  },
   dayCircleHovered: {
     backgroundColor: colors.grey600
   },
@@ -36150,6 +36214,9 @@ var styles32 = reactNative.StyleSheet.create({
     color: colors.red
   }
 });
+
+// src/components/Select/Select.tsx
+var import_react_dom3 = __toESM(require_react_dom());
 var DEFAULT_WIDTH4 = 308;
 var TRIGGER_HEIGHT2 = 44;
 var TRIGGER_RADIUS2 = 60;
@@ -36159,6 +36226,9 @@ var ITEM_RADIUS2 = 12;
 var ICON_SIZE13 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
+var WEB_MENU_Z_INDEX = 600;
+var WEB_VIEWPORT_PADDING = 8;
+var WEB_MENU_GAP = 8;
 function itemBackground(state) {
   switch (state) {
     case "hover":
@@ -36305,6 +36375,7 @@ var Select = react.forwardRef(
     const valueProp = props.value;
     const rootRef = react.useRef(null);
     const triggerRef = react.useRef(null);
+    const menuRef = react.useRef(null);
     const searchInputRef = react.useRef(null);
     const setRootRef = react.useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
     const isOpenControlled = typeof openProp === "boolean";
@@ -36320,6 +36391,7 @@ var Select = react.forwardRef(
     const [hoveredValue, setHoveredValue] = react.useState(null);
     const [menuAlignEnd, setMenuAlignEnd] = react.useState(false);
     const [menuPlaceAbove, setMenuPlaceAbove] = react.useState(false);
+    const [webMenuPosition, setWebMenuPosition] = react.useState(null);
     const selectedValues = react.useMemo(() => {
       const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
       return toArray(current);
@@ -36373,6 +36445,7 @@ var Select = react.forwardRef(
           setHoveredValue(null);
           setMenuAlignEnd(false);
           setMenuPlaceAbove(false);
+          setWebMenuPosition(null);
           onSearchChange?.("");
         }
       },
@@ -36384,15 +36457,18 @@ var Select = react.forwardRef(
         const trigger = triggerRef.current;
         const rect = trigger?.getBoundingClientRect?.();
         if (!rect) return;
-        const viewportPadding = 8;
-        const gap = 8;
         const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
-        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - WEB_VIEWPORT_PADDING;
         setMenuAlignEnd(overflowsRight);
-        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
-        const spaceAbove = rect.top - viewportPadding;
-        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        const spaceBelow = window.innerHeight - WEB_VIEWPORT_PADDING - rect.bottom;
+        const spaceAbove = rect.top - WEB_VIEWPORT_PADDING;
+        const needsAbove = estimatedMenuHeight + WEB_MENU_GAP > spaceBelow && spaceAbove > spaceBelow;
         setMenuPlaceAbove(needsAbove);
+        const available = Math.max(0, (needsAbove ? spaceAbove : spaceBelow) - WEB_MENU_GAP);
+        const maxHeight = Math.min(estimatedMenuHeight, Math.max(available, TRIGGER_HEIGHT2));
+        const left = overflowsRight ? Math.max(WEB_VIEWPORT_PADDING, rect.right - menuWidth) : Math.min(rect.left, window.innerWidth - WEB_VIEWPORT_PADDING - menuWidth);
+        const top = needsAbove ? Math.max(WEB_VIEWPORT_PADDING, rect.top - WEB_MENU_GAP - maxHeight) : rect.bottom + WEB_MENU_GAP;
+        setWebMenuPosition({ top, left, width: menuWidth, maxHeight });
       };
       updateMenuPlacement();
       window.addEventListener("resize", updateMenuPlacement);
@@ -36409,11 +36485,12 @@ var Select = react.forwardRef(
     react.useEffect(() => {
       if (reactNative.Platform.OS !== "web" || !isOpen) return;
       const handlePointerDown = (event) => {
-        const root = rootRef.current;
         const target = event.target;
-        if (root?.contains && target instanceof Node && !root.contains(target)) {
-          setOpen(false);
-        }
+        if (!(target instanceof Node)) return;
+        const root = rootRef.current;
+        const menu = menuRef.current;
+        if (root?.contains?.(target) || menu?.contains?.(target)) return;
+        setOpen(false);
       };
       document.addEventListener("mousedown", handlePointerDown);
       document.addEventListener("touchstart", handlePointerDown);
@@ -36527,7 +36604,7 @@ var Select = react.forwardRef(
     ]);
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE13,
-      color: error ? colors.red : colors.primary
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
     const triggerBorderColor = error ? colors.redMuted : isOpen ? colors.primaryMuted : colors.grey700;
@@ -36536,6 +36613,95 @@ var Select = react.forwardRef(
     const hintColor = error ? colors.red : colors.grey100;
     const singleLabel = selectedOptions[0]?.label ?? placeholder;
     const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    const optionListMaxHeight = reactNative.Platform.OS === "web" && webMenuPosition != null ? Math.max(43, webMenuPosition.maxHeight - (24 + (showSearch ? 48 : 0))) : resolvedOptionListMaxHeight;
+    const menuNode = isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ref: menuRef,
+        style: [
+          styles33.menu,
+          reactNative.Platform.OS === "web" && webMenuPosition != null ? {
+            position: "fixed",
+            top: webMenuPosition.top,
+            left: webMenuPosition.left,
+            width: webMenuPosition.width,
+            minWidth: webMenuPosition.width,
+            maxHeight: webMenuPosition.maxHeight,
+            zIndex: WEB_MENU_Z_INDEX,
+            marginTop: 0,
+            marginBottom: 0
+          } : reactNative.Platform.OS === "web" ? { position: "fixed", opacity: 0, pointerEvents: "none" } : [
+            menuAlignEnd ? styles33.menuAlignEnd : styles33.menuAlignStart,
+            menuPlaceAbove ? styles33.menuAbove : styles33.menuBelow
+          ],
+          menuStyle
+        ],
+        children: [
+          showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles33.searchField, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.TextInput,
+              {
+                ref: searchInputRef,
+                value: searchQuery,
+                onChangeText: handleSearchChange,
+                editable: !disabled,
+                placeholder: searchPlaceholder,
+                placeholderTextColor: colors.grey100,
+                style: [
+                  styles33.searchInput,
+                  reactNative.Platform.OS === "web" ? styles33.searchInputWeb : null,
+                  reactNative.Platform.OS === "android" ? styles33.searchInputAndroid : null
+                ],
+                accessibilityLabel: searchPlaceholder
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactNative.ScrollView,
+            {
+              style: [styles33.optionList, { maxHeight: optionListMaxHeight }],
+              contentContainerStyle: styles33.optionListContent,
+              keyboardShouldPersistTaps: "handled",
+              showsVerticalScrollIndicator: false,
+              children: [
+                loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.statusText, children: emptyText }) }) : null,
+                !loading && filteredOptions.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  const isHovered = hoveredValue === option.value;
+                  const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.Pressable,
+                    {
+                      onPress: () => handleSelect(option.value),
+                      disabled,
+                      onHoverIn: () => setHoveredValue(option.value),
+                      onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                      onPressIn: () => setHoveredValue(option.value),
+                      onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                      accessibilityRole: multiple ? "checkbox" : "button",
+                      accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+                      style: [
+                        styles33.item,
+                        {
+                          backgroundColor: itemBackground(visualState)
+                        }
+                      ],
+                      children: [
+                        multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles33.itemCheckbox, { pointerEvents: "none" }], children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.itemLabel, numberOfLines: 1, children: option.label })
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null;
+    const webMenuPortal = reactNative.Platform.OS === "web" && isOpen && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(menuNode, document.body) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
@@ -36576,80 +36742,7 @@ var Select = react.forwardRef(
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
-              reactNative.View,
-              {
-                style: [
-                  styles33.menu,
-                  menuAlignEnd ? styles33.menuAlignEnd : styles33.menuAlignStart,
-                  menuPlaceAbove ? styles33.menuAbove : styles33.menuBelow,
-                  menuStyle
-                ],
-                children: [
-                  showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles33.searchField, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      reactNative.TextInput,
-                      {
-                        ref: searchInputRef,
-                        value: searchQuery,
-                        onChangeText: handleSearchChange,
-                        editable: !disabled,
-                        placeholder: searchPlaceholder,
-                        placeholderTextColor: colors.grey100,
-                        style: [
-                          styles33.searchInput,
-                          reactNative.Platform.OS === "web" ? styles33.searchInputWeb : null,
-                          reactNative.Platform.OS === "android" ? styles33.searchInputAndroid : null
-                        ],
-                        accessibilityLabel: searchPlaceholder
-                      }
-                    )
-                  ] }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    reactNative.ScrollView,
-                    {
-                      style: [styles33.optionList, { maxHeight: resolvedOptionListMaxHeight }],
-                      contentContainerStyle: styles33.optionListContent,
-                      keyboardShouldPersistTaps: "handled",
-                      showsVerticalScrollIndicator: false,
-                      children: [
-                        loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.statusText, children: emptyText }) }) : null,
-                        !loading && filteredOptions.map((option) => {
-                          const isSelected = selectedValues.includes(option.value);
-                          const isHovered = hoveredValue === option.value;
-                          const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
-                          return /* @__PURE__ */ jsxRuntime.jsxs(
-                            reactNative.Pressable,
-                            {
-                              onPress: () => handleSelect(option.value),
-                              disabled,
-                              onHoverIn: () => setHoveredValue(option.value),
-                              onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
-                              onPressIn: () => setHoveredValue(option.value),
-                              onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
-                              accessibilityRole: multiple ? "checkbox" : "button",
-                              accessibilityState: { selected: isSelected, checked: isSelected, disabled },
-                              style: [
-                                styles33.item,
-                                {
-                                  backgroundColor: itemBackground(visualState)
-                                }
-                              ],
-                              children: [
-                                multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles33.itemCheckbox, { pointerEvents: "none" }], children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.itemLabel, numberOfLines: 1, children: option.label })
-                              ]
-                            },
-                            option.value
-                          );
-                        })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ) : null
+            reactNative.Platform.OS === "web" ? webMenuPortal : menuNode
           ] }),
           showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles33.hint, { color: hintColor }], children: hint }) : null
         ]