@elik56a/react-native-pickers 0.0.0-stage → 0.1.1

package/src/select/SelectList.tsx

@@ -0,0 +1,266 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { textStyle, usePickerTheme } from '../theme';
+import type { PickerTheme } from '../theme';
+import type { SlotStyles, ThemableProps } from '../types';
+import { defaultFilter } from './filter';
+
+export { defaultFilter };
+
+export interface SelectOption<T> {
+  label: string;
+  value: T;
+  description?: string;
+  disabled?: boolean;
+  /** Leading element: icon, avatar, flag... */
+  icon?: React.ReactNode;
+  /** Options sharing a group are rendered under a section header */
+  group?: string;
+  /** Extra search terms */
+  keywords?: string[];
+}
+
+export type SelectSlot =
+  | 'container'
+  | 'search'
+  | 'searchInput'
+  | 'list'
+  | 'groupHeader'
+  | 'groupHeaderText'
+  | 'option'
+  | 'selectedOption'
+  | 'optionLabel'
+  | 'selectedOptionLabel'
+  | 'optionDescription'
+  | 'check'
+  | 'empty'
+  | 'emptyText';
+
+export interface SelectRenderOptionInfo<T> {
+  option: SelectOption<T>;
+  selected: boolean;
+  disabled: boolean;
+  theme: PickerTheme;
+}
+
+/** Blocks inference from `onChange`, so `onChange={setState}` doesn't infer `T` as `SetStateAction<…>`. Works before TS 5.4's built-in NoInfer. */
+type NoInferValue<T> = [T][T extends unknown ? 0 : never];
+
+export type SelectValueProps<T> =
+  | { multiple?: false; value?: T | null; onChange?: (value: NoInferValue<T>, option: SelectOption<T>) => void }
+  | { multiple: true; value?: T[]; onChange?: (value: NoInferValue<T>[], options: SelectOption<T>[]) => void; maxSelected?: number };
+
+export type SelectListBaseProps<T> = ThemableProps & {
+  options: ReadonlyArray<SelectOption<T>>;
+  /** Show a search field. Default: true when there are more than 8 options */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Custom filter. Default: case/diacritics-insensitive match on label, description and keywords */
+  filterOption?: (option: SelectOption<T>, query: string) => boolean;
+  renderOption?: (info: SelectRenderOptionInfo<T>) => React.ReactNode;
+  renderGroupHeader?: (group: string, theme: PickerTheme) => React.ReactNode;
+  emptyText?: string;
+  /** Show check marks on selected rows. Default: true */
+  showCheckmarks?: boolean;
+  isEqual?: (a: T, b: T) => boolean;
+  /** Height of the list area. Default: grows with content */
+  listHeight?: number;
+  autoFocusSearch?: boolean;
+  style?: StyleProp<ViewStyle>;
+  styles?: SlotStyles<SelectSlot>;
+  testID?: string;
+};
+
+export type SelectListProps<T> = SelectListBaseProps<T> & SelectValueProps<T>;
+
+type Row<T> = { type: 'header'; group: string } | { type: 'option'; option: SelectOption<T> };
+
+export function SelectList<T>(props: SelectListProps<T>) {
+  const {
+    options,
+    searchable,
+    searchPlaceholder = 'Search',
+    filterOption = defaultFilter,
+    renderOption,
+    renderGroupHeader,
+    emptyText = 'No results',
+    showCheckmarks = true,
+    isEqual = Object.is,
+    listHeight,
+    autoFocusSearch,
+    style,
+    styles: slots,
+    theme: themeOverride,
+    testID,
+  } = props;
+  const theme = usePickerTheme(themeOverride);
+  const c = theme.colors;
+  const [query, setQuery] = useState('');
+  const showSearch = searchable ?? options.length > 8;
+
+  const selectedValues: T[] = props.multiple ? props.value ?? [] : props.value !== undefined && props.value !== null ? [props.value] : [];
+  const isSelected = useCallback((v: T) => selectedValues.some((s) => isEqual(s, v)), [isEqual, selectedValues]);
+
+  const rows = useMemo<Row<T>[]>(() => {
+    const filtered = query ? options.filter((o) => filterOption(o, query)) : options;
+    const out: Row<T>[] = [];
+    const order: string[] = [];
+    const byGroup = new Map<string, SelectOption<T>[]>();
+    for (const o of filtered) {
+      const g = o.group ?? '';
+      if (!byGroup.has(g)) {
+        byGroup.set(g, []);
+        order.push(g);
+      }
+      byGroup.get(g)!.push(o);
+    }
+    for (const g of order) {
+      if (g) out.push({ type: 'header', group: g });
+      for (const o of byGroup.get(g)!) out.push({ type: 'option', option: o });
+    }
+    return out;
+  }, [filterOption, options, query]);
+
+  const toggle = useCallback(
+    (o: SelectOption<T>) => {
+      if (!props.multiple) {
+        props.onChange?.(o.value, o);
+        return;
+      }
+      const cur = props.value ?? [];
+      const has = cur.some((v) => isEqual(v, o.value));
+      if (!has && props.maxSelected !== undefined && cur.length >= props.maxSelected) return;
+      const next = has ? cur.filter((v) => !isEqual(v, o.value)) : [...cur, o.value];
+      props.onChange?.(
+        next,
+        next.map((v) => options.find((x) => isEqual(x.value, v))!).filter(Boolean)
+      );
+    },
+    [isEqual, options, props]
+  );
+
+  const atMax = props.multiple && props.maxSelected !== undefined && (props.value?.length ?? 0) >= props.maxSelected;
+
+  const renderRow = ({ item }: { item: Row<T> }) => {
+    if (item.type === 'header') {
+      return renderGroupHeader ? (
+        <>{renderGroupHeader(item.group, theme)}</>
+      ) : (
+        <View style={[{ paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.md, paddingBottom: theme.spacing.xs }, slots?.groupHeader]}>
+          <Text style={[textStyle(theme, 'xs', 'bold'), { color: c.textSecondary, textTransform: 'uppercase', letterSpacing: 0.6 }, slots?.groupHeaderText]}>
+            {item.group}
+          </Text>
+        </View>
+      );
+    }
+    const o = item.option;
+    const selected = isSelected(o.value);
+    const disabled = !!o.disabled || (!!atMax && !selected);
+    return (
+      <Pressable
+        onPress={disabled ? undefined : () => toggle(o)}
+        accessibilityRole={props.multiple ? 'checkbox' : 'button'}
+        accessibilityState={{ selected, checked: props.multiple ? selected : undefined, disabled }}
+        accessibilityLabel={o.label}
+        style={({ pressed }) => [
+          s.option,
+          {
+            paddingHorizontal: theme.spacing.lg,
+            marginHorizontal: theme.spacing.sm,
+            borderRadius: theme.radius.md,
+            backgroundColor: selected ? c.primaryMuted : pressed ? c.surface : 'transparent',
+            opacity: disabled ? 0.45 : 1,
+          },
+          slots?.option,
+          selected && slots?.selectedOption,
+        ]}
+      >
+        {renderOption ? (
+          renderOption({ option: o, selected, disabled, theme })
+        ) : (
+          <>
+            {o.icon ? <View style={{ marginEnd: theme.spacing.md }}>{o.icon}</View> : null}
+            <View style={s.flex}>
+              <Text
+                numberOfLines={1}
+                style={[textStyle(theme, 'md', selected ? 'medium' : 'regular'), slots?.optionLabel, selected && slots?.selectedOptionLabel]}
+              >
+                {o.label}
+              </Text>
+              {o.description ? (
+                <Text numberOfLines={2} style={[textStyle(theme, 'sm'), { color: c.textSecondary, marginTop: 2 }, slots?.optionDescription]}>
+                  {o.description}
+                </Text>
+              ) : null}
+            </View>
+            {showCheckmarks && (props.multiple || selected) ? (
+              <Check selected={selected} multiple={!!props.multiple} theme={theme} style={slots?.check} />
+            ) : null}
+          </>
+        )}
+      </Pressable>
+    );
+  };
+
+  return (
+    <View style={[style, slots?.container]} testID={testID}>
+      {showSearch && (
+        <View style={[{ paddingHorizontal: theme.spacing.lg, paddingBottom: theme.spacing.sm }, slots?.search]}>
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder={searchPlaceholder}
+            placeholderTextColor={c.textSecondary}
+            autoFocus={autoFocusSearch}
+            autoCorrect={false}
+            autoCapitalize="none"
+            clearButtonMode="while-editing"
+            accessibilityLabel={searchPlaceholder}
+            style={[
+              textStyle(theme, 'md'),
+              { backgroundColor: c.surface, borderRadius: theme.radius.md, paddingHorizontal: theme.spacing.md, height: 42 },
+              slots?.searchInput,
+            ]}
+          />
+        </View>
+      )}
+      <FlatList
+        data={rows}
+        keyExtractor={(r, i) => (r.type === 'header' ? `h:${r.group}` : `o:${i}:${r.option.label}`)}
+        renderItem={renderRow}
+        keyboardShouldPersistTaps="handled"
+        style={[listHeight !== undefined ? { height: listHeight } : null, slots?.list]}
+        ListEmptyComponent={
+          <View style={[{ padding: theme.spacing.xl, alignItems: 'center' }, slots?.empty]}>
+            <Text style={[textStyle(theme, 'md'), { color: c.textSecondary }, slots?.emptyText]}>{emptyText}</Text>
+          </View>
+        }
+      />
+    </View>
+  );
+}
+
+function Check({ selected, multiple, theme, style }: { selected: boolean; multiple: boolean; theme: PickerTheme; style?: StyleProp<any> }) {
+  const c = theme.colors;
+  if (!multiple) {
+    return <Text style={[textStyle(theme, 'md', 'bold'), { color: c.primary, marginStart: theme.spacing.md }, style]}>✓</Text>;
+  }
+  return (
+    <View
+      style={[
+        s.box,
+        { marginStart: theme.spacing.md, borderRadius: 6, borderColor: selected ? c.primary : c.border, backgroundColor: selected ? c.primary : 'transparent' },
+        style,
+      ]}
+    >
+      {selected ? <Text style={{ color: c.onPrimary, fontSize: 13, fontWeight: '700', lineHeight: 16 }}>✓</Text> : null}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  option: { flexDirection: 'row', alignItems: 'center', minHeight: 48, paddingVertical: 10, marginVertical: 1 },
+  flex: { flex: 1 },
+  box: { width: 22, height: 22, borderWidth: 2, alignItems: 'center', justifyContent: 'center' },
+});

package/src/select/SelectPicker.tsx

@@ -0,0 +1,203 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { PickerSheet } from '../sheet/PickerSheet';
+import type { SheetChromeProps } from '../sheet/PickerSheet';
+import { textStyle, usePickerTheme } from '../theme';
+import type { SlotStyles } from '../types';
+import { SelectList } from './SelectList';
+import type { SelectListBaseProps, SelectOption, SelectSlot, SelectValueProps } from './SelectList';
+
+export type SelectTriggerSlot = 'trigger' | 'triggerText' | 'placeholder' | 'label' | 'chip' | 'chipText' | 'chevron' | 'clear';
+
+export interface SelectTriggerInfo<T> {
+  open: () => void;
+  selected: SelectOption<T>[];
+  disabled: boolean;
+}
+
+export type SelectPickerProps<T> = Omit<SelectListBaseProps<T>, 'style' | 'styles'> &
+  SelectValueProps<T> & {
+    placeholder?: string;
+    /** Label rendered above the field */
+    label?: string;
+    disabled?: boolean;
+    /** Show a clear (×) button when something is selected */
+    clearable?: boolean;
+    onClear?: () => void;
+    /** Show selected values as chips in multiple mode. Default: true */
+    chips?: boolean;
+    /** Single mode: close the sheet on select. Default: true */
+    closeOnSelect?: boolean;
+    /** Custom trigger: render anything and call `open()` */
+    renderTrigger?: (info: SelectTriggerInfo<T>) => React.ReactNode;
+    /** Sheet title. Default: `label` */
+    sheetTitle?: string;
+    sheet?: Partial<Omit<SheetChromeProps, 'visible' | 'onClose' | 'theme'>>;
+    onOpen?: () => void;
+    onClose?: () => void;
+    style?: StyleProp<ViewStyle>;
+    styles?: SlotStyles<SelectSlot | SelectTriggerSlot>;
+  };
+
+export function SelectPicker<T>(props: SelectPickerProps<T>) {
+  const {
+    placeholder = 'Select…',
+    label,
+    disabled = false,
+    clearable,
+    onClear,
+    chips = true,
+    closeOnSelect = true,
+    renderTrigger,
+    sheetTitle,
+    sheet,
+    onOpen,
+    onClose,
+    style,
+    styles: slots,
+    theme: themeOverride,
+    options,
+    isEqual = Object.is,
+    ...listProps
+  } = props;
+  const theme = usePickerTheme(themeOverride);
+  const c = theme.colors;
+  const [open, setOpen] = useState(false);
+
+  const selected = useMemo(() => {
+    const vals: T[] = props.multiple ? props.value ?? [] : props.value !== undefined && props.value !== null ? [props.value] : [];
+    return vals.map((v) => options.find((o) => isEqual(o.value, v))).filter((o): o is SelectOption<T> => !!o);
+  }, [isEqual, options, props.multiple, props.value]);
+
+  const show = () => {
+    if (disabled) return;
+    setOpen(true);
+    onOpen?.();
+  };
+  const hide = () => {
+    setOpen(false);
+    onClose?.();
+  };
+
+  const onChange = props.multiple
+    ? props.onChange
+    : (v: T, o: SelectOption<T>) => {
+        (props.onChange as ((v: T, o: SelectOption<T>) => void) | undefined)?.(v, o);
+        if (closeOnSelect) hide();
+      };
+
+  const removeChip = (o: SelectOption<T>) => {
+    if (!props.multiple) return;
+    const next = (props.value ?? []).filter((v) => !isEqual(v, o.value));
+    props.onChange?.(next, selected.filter((s) => !isEqual(s.value, o.value)));
+  };
+
+  const [pressed, setPressed] = useState(false);
+  const trigger = renderTrigger ? (
+    renderTrigger({ open: show, selected, disabled })
+  ) : (
+    <View
+      style={[
+        s.trigger,
+        {
+          backgroundColor: c.background,
+          borderColor: open ? c.primary : c.border,
+          borderRadius: theme.radius.md,
+          paddingHorizontal: theme.spacing.md,
+          opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
+        },
+        slots?.trigger,
+      ]}
+    >
+      {/* Full-size press target behind the content, so chips and clear stay sibling buttons */}
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={show}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? placeholder}
+        accessibilityHint={selected.map((o) => o.label).join(', ') || undefined}
+        accessibilityState={{ disabled, expanded: open }}
+      />
+      <View style={s.triggerContent} pointerEvents="box-none">
+        {selected.length === 0 ? (
+          <Text pointerEvents="none" style={[textStyle(theme, 'md'), { color: c.textSecondary }, slots?.placeholder]} numberOfLines={1}>
+            {placeholder}
+          </Text>
+        ) : props.multiple && chips ? (
+          <View style={s.chips} pointerEvents="box-none">
+            {selected.map((o) => (
+              <Pressable
+                key={String(o.label)}
+                onPress={() => removeChip(o)}
+                disabled={disabled}
+                accessibilityRole="button"
+                accessibilityLabel={`Remove ${o.label}`}
+                style={[s.chip, { backgroundColor: c.primaryMuted, borderRadius: theme.radius.full }, slots?.chip]}
+              >
+                <Text style={[textStyle(theme, 'sm', 'medium'), { color: c.primary }, slots?.chipText]}>{o.label}  ×</Text>
+              </Pressable>
+            ))}
+          </View>
+        ) : (
+          <View style={s.row} pointerEvents="none">
+            {!props.multiple && selected[0]?.icon ? <View style={{ marginEnd: 8 }}>{selected[0].icon}</View> : null}
+            <Text style={[textStyle(theme, 'md'), slots?.triggerText]} numberOfLines={1}>
+              {selected.map((o) => o.label).join(', ')}
+            </Text>
+          </View>
+        )}
+      </View>
+      {clearable && selected.length > 0 && !disabled ? (
+        <Pressable
+          hitSlop={10}
+          onPress={() => {
+            if (props.multiple) props.onChange?.([], []);
+            onClear?.();
+          }}
+          accessibilityRole="button"
+          accessibilityLabel="Clear"
+        >
+          <Text style={[textStyle(theme, 'lg'), { color: c.textSecondary, paddingHorizontal: 6 }, slots?.clear]}>×</Text>
+        </Pressable>
+      ) : null}
+      <Text pointerEvents="none" style={[textStyle(theme, 'sm'), { color: c.textSecondary, marginStart: 4 }, slots?.chevron]}>▾</Text>
+    </View>
+  );
+
+  return (
+    <View style={style}>
+      {label ? <Text style={[textStyle(theme, 'sm', 'medium'), { color: c.textSecondary, marginBottom: 6 }, slots?.label]}>{label}</Text> : null}
+      {trigger}
+      <PickerSheet
+        visible={open}
+        onClose={hide}
+        title={sheetTitle ?? label}
+        theme={themeOverride}
+        showCancel={false}
+        onConfirm={props.multiple || !closeOnSelect ? hide : undefined}
+        {...sheet}
+      >
+        <SelectList<T>
+          {...(listProps as SelectListBaseProps<T>)}
+          {...({ multiple: props.multiple, value: props.value, onChange, maxSelected: (props as { maxSelected?: number }).maxSelected } as SelectValueProps<T>)}
+          options={options}
+          isEqual={isEqual}
+          theme={themeOverride}
+          styles={slots}
+        />
+      </PickerSheet>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  trigger: { flexDirection: 'row', alignItems: 'center', minHeight: 48, borderWidth: 1, paddingVertical: 6 },
+  triggerContent: { flex: 1 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  chip: { paddingHorizontal: 10, paddingVertical: 4 },
+});

package/src/select/filter.ts

@@ -0,0 +1,17 @@
+import type { SelectOption } from './SelectList';
+
+/** Lowercase and strip Latin diacritics and Hebrew niqqud. */
+const fold = (s: string) =>
+  s
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[̀-֑ͯ-ׇ]/g, '');
+
+export function defaultFilter<T>(o: SelectOption<T>, q: string): boolean {
+  const hay = fold([o.label, o.description ?? '', ...(o.keywords ?? [])].join(' '));
+  return fold(q)
+    .split(/\s+/)
+    .filter(Boolean)
+    .every((term) => hay.includes(term));
+}
+

package/src/sheet/BottomSheet.tsx

@@ -0,0 +1,199 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { textStyle, usePickerTheme } from '../theme';
+import type { SlotStyles, ThemableProps } from '../types';
+
+export type BottomSheetSlot = 'backdrop' | 'sheet' | 'handle' | 'header' | 'title' | 'content' | 'footer';
+
+export interface BottomSheetProps extends ThemableProps {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  /** Rendered on the right side of the header (e.g. a Done button) */
+  headerRight?: React.ReactNode;
+  headerLeft?: React.ReactNode;
+  footer?: React.ReactNode;
+  /** Drag the sheet down to dismiss. Default: true */
+  enableSwipeToClose?: boolean;
+  /** Tap the backdrop to dismiss. Default: true */
+  closeOnBackdropPress?: boolean;
+  /** Max sheet height as a fraction of the window. Default: 0.9 */
+  maxHeightRatio?: number;
+  /** Fixed sheet height (px or fraction of the window when <= 1) */
+  height?: number;
+  /** Extra bottom padding for home indicators. Default: 24 on iOS, 12 elsewhere */
+  bottomInset?: number;
+  styles?: SlotStyles<BottomSheetSlot>;
+  onOpened?: () => void;
+  onClosed?: () => void;
+  testID?: string;
+}
+
+export function BottomSheet({
+  visible,
+  onClose,
+  children,
+  title,
+  headerLeft,
+  headerRight,
+  footer,
+  enableSwipeToClose = true,
+  closeOnBackdropPress = true,
+  maxHeightRatio = 0.9,
+  height,
+  bottomInset = Platform.OS === 'ios' ? 24 : 12,
+  styles: slots,
+  theme: themeOverride,
+  onOpened,
+  onClosed,
+  testID,
+}: BottomSheetProps) {
+  const theme = usePickerTheme(themeOverride);
+  const { height: windowHeight } = useWindowDimensions();
+  const [mounted, setMounted] = useState(visible);
+  const progress = useRef(new Animated.Value(0)).current; // 0 hidden, 1 shown
+  const drag = useRef(new Animated.Value(0)).current;
+  const sheetHeight = useRef(windowHeight);
+  const native = Platform.OS !== 'web';
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      drag.setValue(0);
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: theme.animation.duration + 60,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: native,
+      }).start(({ finished }) => finished && onOpened?.());
+    } else if (mounted) {
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: theme.animation.duration,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: native,
+      }).start(({ finished }) => {
+        if (finished) {
+          setMounted(false);
+          onClosed?.();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+
+  const pan = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => enableSwipeToClose && g.dy > 6 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_, g) => drag.setValue(Math.max(0, g.dy)),
+      onPanResponderRelease: (_, g) => {
+        if (g.dy > Math.min(140, sheetHeight.current * 0.3) || g.vy > 0.9) {
+          closeRef.current();
+        } else {
+          Animated.spring(drag, { toValue: 0, useNativeDriver: native, bounciness: 4 }).start();
+        }
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(drag, { toValue: 0, useNativeDriver: native }).start();
+      },
+    })
+  ).current;
+
+  const onLayout = useCallback((e: { nativeEvent: { layout: { height: number } } }) => {
+    sheetHeight.current = e.nativeEvent.layout.height;
+  }, []);
+
+  if (!mounted) return null;
+
+  const translateY = Animated.add(
+    progress.interpolate({ inputRange: [0, 1], outputRange: [windowHeight, 0] }),
+    drag
+  );
+  const resolvedHeight = height === undefined ? undefined : height <= 1 ? windowHeight * height : height;
+
+  return (
+    <Modal visible transparent animationType="none" statusBarTranslucent onRequestClose={onClose} testID={testID}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={StyleSheet.absoluteFill}>
+        <Animated.View style={[StyleSheet.absoluteFill, { backgroundColor: theme.colors.backdrop, opacity: progress }, slots?.backdrop]}>
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            onPress={closeOnBackdropPress ? onClose : undefined}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+          />
+        </Animated.View>
+        <View style={s.container} pointerEvents="box-none">
+          <Animated.View
+            onLayout={onLayout}
+            style={[
+              s.sheet,
+              {
+                backgroundColor: theme.colors.sheet,
+                borderTopLeftRadius: theme.radius.sheet,
+                borderTopRightRadius: theme.radius.sheet,
+                maxHeight: windowHeight * maxHeightRatio,
+                height: resolvedHeight,
+                paddingBottom: bottomInset,
+                transform: [{ translateY }],
+              },
+              slots?.sheet,
+            ]}
+            accessibilityViewIsModal
+          >
+            <View {...pan.panHandlers}>
+              <View style={s.handleArea}>
+                <View style={[s.handle, { backgroundColor: theme.colors.handle }, slots?.handle]} />
+              </View>
+              {(title || headerLeft || headerRight) && (
+                <View style={[s.header, { paddingHorizontal: theme.spacing.lg }, slots?.header]}>
+                  <View style={s.headerSide}>{headerLeft}</View>
+                  <View style={s.headerCenter}>
+                    {typeof title === 'string' ? (
+                      <Text style={[textStyle(theme, 'md', 'bold'), slots?.title]} numberOfLines={1} accessibilityRole="header">
+                        {title}
+                      </Text>
+                    ) : (
+                      title
+                    )}
+                  </View>
+                  <View style={[s.headerSide, s.headerRight]}>{headerRight}</View>
+                </View>
+              )}
+            </View>
+            <View style={[resolvedHeight ? s.flex : s.shrink, slots?.content]}>{children}</View>
+            {footer ? <View style={[{ paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.md }, slots?.footer]}>{footer}</View> : null}
+          </Animated.View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'flex-end' },
+  sheet: { width: '100%', alignSelf: 'center', maxWidth: 640, overflow: 'hidden' },
+  handleArea: { alignItems: 'center', paddingTop: 8, paddingBottom: 6 },
+  handle: { width: 40, height: 5, borderRadius: 3 },
+  header: { flexDirection: 'row', alignItems: 'center', minHeight: 44, paddingBottom: 4 },
+  headerSide: { flex: 1, flexDirection: 'row', alignItems: 'center' },
+  headerRight: { justifyContent: 'flex-end' },
+  headerCenter: { flex: 2, alignItems: 'center' },
+  flex: { flex: 1 },
+  shrink: { flexShrink: 1 },
+});