@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/OptionSheet/OptionSheet.js

@@ -0,0 +1,702 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OptionSheet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _useDragToDismiss = require("../../hooks/useDragToDismiss.js");
+var _index = require("../../theme/index.js");
+var _corners = require("../../utils/corners.js");
+var _defaultIcons = require("../AppIcon/defaultIcons.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * OptionSheet — the shared bottom-sheet option picker.
+ *
+ * Internal primitive behind Select and InlineSelect: RN Modal-backed slide-up
+ * sheet with backdrop fade, grab handle, optional title, optional client-side
+ * search, the option list (icon + label + description, single dot / multi
+ * checkbox) and the multi-select Done footer. Owns the open/close animations
+ * and the search query; selection STATE stays with the caller — the sheet
+ * only reports `onSelect(option)` and asks `isSelected(value)`.
+ *
+ * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
+ * and accessor signatures shared by every option-picking component. Select
+ * re-exports them so the public import path is unchanged.
+ */
+
+/** Magnifier and clear glyph size in the search box, matching SearchBar's md size. */const SEARCH_ICON_SIZE = 18;
+
+/** A titled group of options; the sheet lists groups in order under a header row each. */
+
+/** What `renderOption` is told about the row it draws. */
+
+/** One list row: a section header or an option. Headers carry no value and take no tap. */
+
+const OptionSheet = props => {
+  const {
+    open,
+    onClose,
+    title,
+    options,
+    sections,
+    renderSectionHeader,
+    renderOption,
+    alphabetIndex = false,
+    searchPlaceholder = 'Search…',
+    emptyText = 'No options',
+    labelOf,
+    getValue,
+    disabledOf,
+    destructiveOf,
+    descriptionOf,
+    iconOf,
+    isSelected,
+    onSelect,
+    multi = false,
+    searchable = false,
+    searchSelectionColor,
+    accessibilityLabel,
+    optionStyle,
+    selectedOptionStyle,
+    optionTextStyle,
+    selectedOptionTextStyle
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [query, setQuery] = (0, _react.useState)('');
+  const screenHeight = _reactNative.Dimensions.get('window').height;
+  const sheetMaxHeight = Math.round(screenHeight * 0.7);
+
+  // Animations: backdrop fade + sheet slide-up. `dragAnim` is the live
+  // finger offset from the drag-to-dismiss gesture, composed on top of the
+  // open/close slide so both can drive the same (native) transform.
+  // The close animation below is correct but was never visible: binding the
+  // native Modal to `open` unmounted the tree the moment `open` flipped, so the
+  // exit played against a torn-down view. Keep it mounted until the exit ends.
+  const [rendered, setRendered] = (0, _react.useState)(open);
+  const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
+  const dragAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheetTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(sheetAnim, dragAnim), [sheetAnim, dragAnim]);
+  (0, _react.useEffect)(() => {
+    if (open) {
+      setRendered(true);
+    }
+  }, [open]);
+  (0, _react.useEffect)(() => {
+    if (!rendered) {
+      return;
+    }
+    // A fresh open must start with no residual drag offset.
+    if (open) {
+      (0, _index.setNativeValue)(dragAnim, 0);
+    }
+    const anim = open ? _reactNative.Animated.parallel([
+    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+    _reactNative.Animated.timing(backdropAnim, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.spring(sheetAnim, {
+      toValue: 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    })]) : _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(sheetAnim, {
+      toValue: sheetMaxHeight,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]);
+    anim.start(({
+      finished
+    }) => {
+      if (finished && !open) {
+        setRendered(false);
+      }
+    });
+    return () => anim.stop();
+  }, [open, rendered, backdropAnim, sheetAnim, dragAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
+
+  // Drag-to-dismiss lives on the handle / title row only, the same as
+  // BottomSheet. A pull on the list (or anywhere else in the body) never moves
+  // or closes the sheet: it used to once the list sat at its top, so an
+  // over-scroll while browsing options closed the picker.
+  const {
+    handleGesture
+  } = (0, _useDragToDismiss.useDragToDismiss)({
+    drag: dragAnim,
+    travel: sheetMaxHeight,
+    onDismiss: onClose
+  });
+  // Registers the list as a native gesture so a flick that starts on a row
+  // cancels that row's press instead of selecting it (BottomSheet does the same).
+  const listGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Native(), []);
+
+  // Keyboard: the search field raises it over the bottom-anchored sheet, and
+  // neither iOS nor Android resizes a translucent Modal for it, so the list
+  // ended up behind the keys. Sit the sheet on the keyboard's top edge and
+  // cap its height to the room left above it. The Modal spans the whole
+  // screen, so the event's screen coordinate is the keyboard's top in host
+  // terms, and it stays right when the reported height leaves out Android's
+  // navigation bar (the same reasoning as BottomSheet's modal mode).
+  const [hostHeight, setHostHeight] = (0, _react.useState)(0);
+  const [keyboardOverlap, setKeyboardOverlap] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (!rendered) {
+      return;
+    }
+    const showEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const onShow = e => {
+      const host = hostHeight > 0 ? hostHeight : screenHeight;
+      const screenY = e.endCoordinates?.screenY;
+      const keyboardTop = typeof screenY === 'number' && screenY > 0 ? screenY : host - (e.endCoordinates?.height ?? 0);
+      setKeyboardOverlap(Math.max(0, Math.round(host - keyboardTop)));
+    };
+    const onHide = () => setKeyboardOverlap(0);
+    const showSub = _reactNative.Keyboard.addListener(showEvt, onShow);
+    const hideSub = _reactNative.Keyboard.addListener(hideEvt, onHide);
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+      setKeyboardOverlap(0);
+    };
+  }, [rendered, hostHeight, screenHeight]);
+  // The app-level provider can report a top inset of 0 inside the translucent
+  // Modal on Android, so the status bar height is the floor for the top clamp.
+  const topClearance = Math.max(insets.top, _reactNative.StatusBar.currentHeight ?? 0) + theme.spacing.sm;
+  const keyboardUp = keyboardOverlap > 0;
+  const visibleMaxHeight = keyboardUp ? Math.max(0, Math.min(sheetMaxHeight, (hostHeight > 0 ? hostHeight : screenHeight) - keyboardOverlap - topClearance)) : sheetMaxHeight;
+
+  // Stale-search guard: the query must not survive a close/reopen cycle.
+  (0, _react.useEffect)(() => {
+    if (!open) {
+      setQuery('');
+    }
+  }, [open]);
+
+  // One flat row list whether or not the caller grouped its options: the
+  // FlatList below is what the drag-to-dismiss and list gestures are wired
+  // to, and Select, InlineSelect, FilePicker and PhoneNumberInput all share
+  // it, so sections flatten into header rows rather than swapping the list.
+  const rows = (0, _react.useMemo)(() => {
+    const q = searchable ? query.trim().toLowerCase() : '';
+    const matches = o => q.length === 0 || labelOf(o).toLowerCase().includes(q) || (descriptionOf(o) ?? '').toLowerCase().includes(q);
+    if (!sections) {
+      return options.filter(matches).map(option => ({
+        kind: 'option',
+        option
+      }));
+    }
+    const out = [];
+    sections.forEach((section, index) => {
+      const kept = section.options.filter(matches);
+      if (kept.length === 0) {
+        return;
+      }
+      out.push({
+        kind: 'header',
+        title: section.title
+      });
+      for (const option of kept) {
+        out.push({
+          kind: 'option',
+          option,
+          section: index
+        });
+      }
+    });
+    return out;
+  }, [searchable, query, options, sections, labelOf, descriptionOf]);
+  const handleClose = (0, _react.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+
+  // The letter rail: each letter maps to the first row (inside the indexed
+  // range) whose label starts with it. Labels starting with anything else
+  // gather under '#'. With sections only the last group is indexed.
+  const listRef = (0, _react.useRef)(null);
+  const letterTargets = (0, _react.useMemo)(() => {
+    const targets = new Map();
+    if (!alphabetIndex) {
+      return targets;
+    }
+    let start = 0;
+    if (sections) {
+      for (let i = rows.length - 1; i >= 0; i -= 1) {
+        if (rows[i].kind === 'header') {
+          start = i + 1;
+          break;
+        }
+      }
+    }
+    for (let i = start; i < rows.length; i += 1) {
+      const row = rows[i];
+      if (row.kind !== 'option') {
+        continue;
+      }
+      const first = labelOf(row.option).trim().charAt(0).toUpperCase();
+      const letter = /^[A-Z]$/.test(first) ? first : '#';
+      if (!targets.has(letter)) {
+        targets.set(letter, i);
+      }
+    }
+    return targets;
+  }, [alphabetIndex, rows, sections, labelOf]);
+  const showRail = alphabetIndex && letterTargets.size > 0 && query.trim().length === 0;
+  const railLetters = (0, _react.useMemo)(() => [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', ...(letterTargets.has('#') ? ['#'] : [])], [letterTargets]);
+  const jumpTo = (0, _react.useCallback)(letter => {
+    const index = letterTargets.get(letter);
+    if (index === undefined) {
+      return;
+    }
+    listRef.current?.scrollToIndex({
+      index,
+      animated: true,
+      viewPosition: 0
+    });
+  }, [letterTargets]);
+  // Rows are not measured until rendered, so a jump far past the rendered
+  // window cannot land in one go: scroll near it by the average row height,
+  // then retry once the window has caught up.
+  const handleScrollToIndexFailed = (0, _react.useCallback)(info => {
+    listRef.current?.scrollToOffset({
+      offset: info.averageItemLength * info.index,
+      animated: false
+    });
+    setTimeout(() => {
+      listRef.current?.scrollToIndex({
+        index: info.index,
+        animated: true,
+        viewPosition: 0
+      });
+    }, 50);
+  }, []);
+  const renderRow = ({
+    item: row
+  }) => {
+    if (row.kind === 'header') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View
+      // One accessibility element, so a screen reader announces the group
+      // as "Popular, header" rather than reading its text as a stray label.
+      , {
+        accessible: true,
+        accessibilityRole: "header",
+        style: [styles.sectionHeader, {
+          paddingHorizontal: theme.spacing.lg,
+          paddingTop: theme.spacing.md
+        }],
+        children: renderSectionHeader ? renderSectionHeader(row.title) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.sectionTitle, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.xs,
+            fontWeight: theme.typography.fontWeight.semibold
+          }],
+          children: row.title.toUpperCase()
+        })
+      });
+    }
+    const item = row.option;
+    const itemLabel = labelOf(item);
+    const itemValue = getValue(item);
+    const itemDescription = descriptionOf(item);
+    const itemIcon = iconOf(item);
+    const selected = isSelected(itemValue);
+    const optDisabled = disabledOf(item);
+    const destructive = destructiveOf?.(item) ?? false;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: () => onSelect(item),
+      disabled: optDisabled,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: itemLabel,
+      accessibilityState: {
+        selected,
+        disabled: optDisabled
+      },
+      style: ({
+        pressed
+      }) => [styles.optionRow, {
+        backgroundColor: selected ? theme.colors.surface.selected : pressed ? theme.colors.surface.pressed : 'transparent',
+        opacity: optDisabled ? 0.5 : 1,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md
+      }, optionStyle, selected ? selectedOptionStyle : null],
+      children: [renderOption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.optionTextWrap,
+        children: renderOption(item, {
+          selected,
+          disabled: optDisabled
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [itemIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.optionIcon,
+          children: itemIcon
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.optionTextWrap,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.optionLabel, {
+              color: destructive ? theme.colors.error : selected ? theme.colors.primary : theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base,
+              fontWeight: selected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+            }, optionTextStyle, selected ? selectedOptionTextStyle : null],
+            numberOfLines: 1,
+            children: itemLabel
+          }), itemDescription ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.optionDescription, {
+              color: theme.colors.text.tertiary,
+              fontSize: theme.typography.fontSize.sm
+            }],
+            numberOfLines: 2,
+            children: itemDescription
+          }) : null]
+        })]
+      }), multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.checkbox, {
+          borderColor: selected ? theme.colors.primary : theme.colors.border.primary,
+          backgroundColor: selected ? theme.colors.primary : 'transparent'
+        }],
+        children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.checkboxTick
+        }) : null
+      }) : selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.singleSelectedDot, {
+          backgroundColor: theme.colors.primary
+        }]
+      }) : null]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: rendered,
+    transparent: true,
+    animationType: "none",
+    onRequestClose: handleClose,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView
+    // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+    , {
+      collapsable: false,
+      onLayout: e => setHostHeight(e.nativeEvent.layout.height),
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: theme.colors.background.overlay
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: handleClose,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close picker"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        accessibilityViewIsModal: true,
+        accessibilityLabel: accessibilityLabel ?? title ?? 'Options',
+        style: [styles.sheet, {
+          maxHeight: visibleMaxHeight,
+          bottom: keyboardOverlap,
+          // The keyboard already covers the home indicator / nav bar.
+          paddingBottom: keyboardUp ? 16 : insets.bottom + 16,
+          backgroundColor: theme.colors.background.elevated,
+          borderTopLeftRadius: theme.radius.xl,
+          borderTopRightRadius: theme.radius.xl,
+          ..._corners.smoothCorners,
+          transform: [{
+            translateY: sheetTranslateY
+          }],
+          ...theme.shadows.xl
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: handleGesture,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.sheetHandleRow,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.sheetHandle, {
+                  backgroundColor: theme.components.select?.handleColor ?? theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
+                }]
+              })
+            }), title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.sheetTitle, {
+                color: theme.colors.text.primary,
+                fontSize: theme.typography.fontSize.lg,
+                fontWeight: theme.typography.fontWeight.semibold,
+                paddingHorizontal: theme.spacing.lg,
+                marginBottom: theme.spacing.sm
+              }],
+              children: title
+            }) : null]
+          })
+        }), searchable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.searchWrap, {
+            marginHorizontal: theme.spacing.lg,
+            marginBottom: theme.spacing.sm
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.searchBox, {
+              backgroundColor: theme.colors.background.secondary,
+              borderColor: theme.colors.border.primary,
+              borderRadius: theme.radius.md,
+              ..._corners.smoothCorners,
+              paddingHorizontal: theme.spacing.md,
+              gap: theme.spacing.sm
+            }],
+            children: [(theme.icons?.search ?? _defaultIcons.defaultIcons.search)({
+              size: SEARCH_ICON_SIZE,
+              color: theme.colors.text.tertiary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+              value: query,
+              onChangeText: setQuery,
+              placeholder: searchPlaceholder,
+              placeholderTextColor: theme.colors.text.tertiary,
+              selectionColor: searchSelectionColor ?? theme.colors.border.focus,
+              accessibilityLabel: "Search options",
+              style: [styles.searchInput, {
+                color: theme.colors.text.primary,
+                fontSize: theme.typography.fontSize.base,
+                paddingVertical: theme.spacing.sm
+              }]
+            }), query.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+              onPress: () => setQuery(''),
+              hitSlop: 8,
+              accessibilityRole: "button",
+              accessibilityLabel: "Clear search",
+              children: (theme.icons?.close ?? _defaultIcons.defaultIcons.close)({
+                size: SEARCH_ICON_SIZE,
+                color: theme.colors.text.secondary
+              })
+            }) : null]
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.listWrap, showRail ? styles.listRow : null],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+            gesture: listGesture,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+              ref: listRef,
+              data: rows,
+              keyExtractor: row => row.kind === 'header' ? `h:${row.title}` : `o:${row.section ?? ''}:${String(getValue(row.option))}`,
+              renderItem: renderRow,
+              onScrollToIndexFailed: handleScrollToIndexFailed,
+              overScrollMode: "never",
+              bounces: false,
+              keyboardShouldPersistTaps: "handled",
+              showsVerticalScrollIndicator: !showRail,
+              style: showRail ? styles.listBesideRail : null,
+              ListEmptyComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.empty, {
+                  color: theme.colors.text.tertiary,
+                  fontSize: theme.typography.fontSize.sm,
+                  paddingVertical: theme.spacing.xl
+                }],
+                children: emptyText
+              })
+            })
+          }), showRail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.rail, {
+              paddingRight: theme.spacing.xs
+            }],
+            accessibilityRole: "list",
+            accessibilityLabel: "Jump to letter",
+            testID: "option-sheet-alphabet",
+            children: railLetters.map(letter => {
+              const enabled = letterTargets.has(letter);
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+                onPress: () => jumpTo(letter),
+                disabled: !enabled,
+                hitSlop: {
+                  left: 8,
+                  right: 8
+                },
+                accessibilityRole: "button",
+                accessibilityLabel: `Jump to ${letter}`,
+                accessibilityState: {
+                  disabled: !enabled
+                },
+                style: styles.railLetter,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.railLetterText, {
+                    color: enabled ? theme.colors.primary : theme.colors.text.tertiary,
+                    fontSize: theme.typography.fontSize.xs,
+                    fontWeight: theme.typography.fontWeight.semibold,
+                    opacity: enabled ? 1 : 0.45
+                  }],
+                  children: letter
+                })
+              }, letter);
+            })
+          }) : null]
+        }), multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.sheetFooter, {
+            borderTopColor: theme.colors.border.secondary,
+            paddingHorizontal: theme.spacing.lg,
+            paddingVertical: theme.spacing.md
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: handleClose,
+            accessibilityRole: "button",
+            accessibilityLabel: "Done",
+            style: ({
+              pressed
+            }) => [styles.doneButton, {
+              backgroundColor: pressed ? theme.colors.primaryPressed : theme.colors.primary,
+              borderRadius: theme.radius.md,
+              ..._corners.smoothCorners,
+              paddingVertical: theme.spacing.sm,
+              paddingHorizontal: theme.spacing.lg
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: {
+                color: theme.colors.text.inverse,
+                fontSize: theme.typography.fontSize.base,
+                fontWeight: theme.typography.fontWeight.semibold
+              },
+              children: "Done"
+            })
+          })
+        }) : null]
+      })]
+    })
+  });
+};
+exports.OptionSheet = OptionSheet;
+OptionSheet.displayName = 'OptionSheet';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingBottom: 16,
+    overflow: 'hidden'
+  },
+  sheetHandleRow: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    ..._corners.smoothCorners
+  },
+  sheetTitle: {
+    includeFontPadding: false
+  },
+  searchWrap: {
+    width: 'auto'
+  },
+  searchBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1
+  },
+  searchInput: {
+    flex: 1,
+    includeFontPadding: false
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  sectionHeader: {
+    paddingBottom: 4
+  },
+  listWrap: {
+    flexShrink: 1
+  },
+  // Only applied while the rail shows.
+  listRow: {
+    flexDirection: 'row'
+  },
+  listBesideRail: {
+    flex: 1
+  },
+  rail: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    paddingVertical: 4
+  },
+  railLetter: {
+    paddingHorizontal: 4,
+    minHeight: 14,
+    justifyContent: 'center'
+  },
+  railLetterText: {
+    includeFontPadding: false,
+    lineHeight: 14
+  },
+  sectionTitle: {
+    includeFontPadding: false,
+    letterSpacing: 0.6
+  },
+  optionIcon: {
+    marginRight: 12
+  },
+  optionTextWrap: {
+    flex: 1
+  },
+  optionLabel: {
+    includeFontPadding: false
+  },
+  optionDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  },
+  checkbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    ..._corners.smoothCorners,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 12
+  },
+  checkboxTick: {
+    width: 10,
+    height: 6,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: theme.colors.onPrimary,
+    transform: [{
+      rotate: '-45deg'
+    }, {
+      translateY: -1
+    }]
+  },
+  singleSelectedDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    ..._corners.smoothCorners,
+    marginLeft: 12
+  },
+  empty: {
+    textAlign: 'center'
+  },
+  sheetFooter: {
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
+    alignItems: 'flex-end'
+  },
+  doneButton: {
+    alignSelf: 'flex-end'
+  }
+});
+var _default = exports.default = OptionSheet;
+//# sourceMappingURL=OptionSheet.js.map