51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:Tf2a,import { useCallback, useMemo, useState } from "react"; import { Pressable, ScrollView, Text, View } from "react-native"; import { cn } from "@/lib/utils"; import { Button, ButtonIcon } from "@/components/ui/button"; import { XIcon } from "@/components/ui/icons"; import { Slot } from "@/components/ui/slot"; import { BottomSheetContext, useBottomSheetContext, } from "./bottom-sheet-context"; import { bottomSheetSlots } from "./bottom-sheet-slots"; import type { BottomSheetCloseProps, BottomSheetProps, BottomSheetTriggerProps, } from "./bottom-sheet-types"; // Components export const BottomSheet = ({ open: openProp, onOpenChange: onOpenChangeProp, children, }: BottomSheetProps) => { const [internalOpen, setInternalOpen] = useState(openProp ?? false); const isControlled = openProp !== undefined; const open = isControlled ? openProp : internalOpen; const onOpenChange = useCallback( (nextOpen: boolean) => { if (!isControlled) { setInternalOpen(nextOpen); } onOpenChangeProp?.(nextOpen); }, [isControlled, onOpenChangeProp] ); const ctx = useMemo( () => ({ fitToContents: true, onOpenChange, open, }), [open, onOpenChange] ); return ( {children} ); }; export const BottomSheetTrigger = ({ asChild, ...props }: BottomSheetTriggerProps) => { const { onOpenChange } = useBottomSheetContext(); const Comp = asChild ? Slot.Pressable : Pressable; return onOpenChange(true)} />; }; export const BottomSheetClose = ({ asChild, ...props }: BottomSheetCloseProps) => { const { onOpenChange } = useBottomSheetContext(); const Comp = asChild ? Slot.Pressable : Pressable; return onOpenChange(false)} />; }; export const BottomSheetBody = ({ className, ...props }: React.ComponentProps) => { const { fitToContents } = useBottomSheetContext(); return ( ); }; export const BottomSheetScrollView = ({ className, contentContainerClassName, ...props }: React.ComponentProps) => { const { fitToContents } = useBottomSheetContext(); return ( ); }; BottomSheetScrollView.displayName = "BottomSheetScrollView"; export const BottomSheetHeader = ({ className, children, ...props }: React.ComponentProps) => { return ( {children} ); }; BottomSheetHeader.displayName = "BottomSheetHeader"; export const BottomSheetTitle = ({ className, ...props }: React.ComponentProps) => ( ); 54:T163f,import type { SnapPoint } from "@expo/ui"; import { BottomSheet as BottomSheetPrimitive, Group as GroupPrimitive, Host as HostPrimitive, RNHostView, } from "@expo/ui/swift-ui"; import { frame, ignoreSafeArea, type ModifierConfig, type PresentationDetent, presentationBackground, presentationDetents, presentationDragIndicator, presentationSizing, } from "@expo/ui/swift-ui/modifiers"; import { useMemo } from "react"; import { useWindowDimensions, View } from "react-native"; import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller"; import Animated, { Extrapolation, interpolate, useAnimatedStyle, } from "react-native-reanimated"; import { SafeAreaInsetsContext, useSafeAreaInsets, } from "react-native-safe-area-context"; import { useCSSVariable } from "uniwind"; import { cn } from "@/lib/utils"; import { BottomSheetContext, useBottomSheetContext, } from "./bottom-sheet-context"; import { bottomSheetSlots } from "./bottom-sheet-slots"; import type { BottomSheetContentProps, BottomSheetFooterProps, } from "./bottom-sheet-types"; // Constants const BOTTOM_SHEET_PADDING = 16; const ZERO_INSETS = { bottom: 0, left: 0, right: 0, top: 0 }; // Components export const BottomSheetContent = (props: BottomSheetContentProps) => { return ( ); }; const BottomSheetContentView = ({ showDragIndicator = true, snapPoints, className, children, style, ...props }: BottomSheetContentProps) => { const { open, onOpenChange } = useBottomSheetContext(); const backgroundColor = useCSSVariable("--color-background") as string; const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0); const hasFooter = bottomSheetSlots.useHasSlot("footer"); const hasScrollView = bottomSheetSlots.useHasSlot("scroll"); // Fitted sheets size to the RN view. A ScrollView reports its full content // height, which pushes the header off-screen. Bound scrollable sheets instead. const fitToContents = !(hasSnapPoints || hasScrollView); const extendScrollToBottomEdge = hasScrollView && !hasFooter; const sheetContext = useMemo( () => ({ fitToContents, onOpenChange, open, }), [fitToContents, onOpenChange, open] ); const { height: windowHeight, width: windowWidth } = useWindowDimensions(); const { top: topInset } = useSafeAreaInsets(); const maxFitToContentsHeight = windowHeight - topInset; const contentModifiers: ModifierConfig[] = [ frame({ alignment: "topLeading", maxWidth: Number.POSITIVE_INFINITY, }), presentationBackground(backgroundColor), presentationDragIndicator(showDragIndicator ? "visible" : "hidden"), ]; if (hasSnapPoints) { contentModifiers.push( presentationDetents(snapPoints?.map(snapPointToDetent) || []) ); if (extendScrollToBottomEdge) { contentModifiers.push( ignoreSafeArea({ edges: "bottom", regions: "container" }) ); } } else if (hasScrollView) { contentModifiers.push( presentationDetents([{ height: maxFitToContentsHeight }]) ); if (extendScrollToBottomEdge) { contentModifiers.push( ignoreSafeArea({ edges: "bottom", regions: "container" }) ); } } else { contentModifiers.push(presentationSizing("fitted")); } const content = ( {children} ); return ( {extendScrollToBottomEdge ? ( {content} ) : ( content )} ); }; export const BottomSheetFooter = ({ className, style, ...props }: BottomSheetFooterProps) => { const { bottom } = useSafeAreaInsets(); const { progress: keyboardProgress } = useReanimatedKeyboardAnimation(); const animatedStyle = useAnimatedStyle( () => ({ paddingBottom: interpolate( keyboardProgress.value, [0, 1], [bottom ? 0 : BOTTOM_SHEET_PADDING, BOTTOM_SHEET_PADDING], Extrapolation.CLAMP ), }), [bottom] ); return ( ); }; BottomSheetFooter.displayName = "BottomSheetFooter"; // Utils const snapPointToDetent = (snapPoint: SnapPoint): PresentationDetent => { if (snapPoint === "half") { return "medium"; } if (snapPoint === "full") { return "large"; } return snapPoint; }; 55:T1b49,import type { SnapPoint } from "@expo/ui"; import { Box, Column, Host, ModalBottomSheet, type ModalBottomSheetRef, RNHostView, } from "@expo/ui/jetpack-compose"; import { background, clip, fillMaxHeight, fillMaxWidth, height, imePadding, type ModifierConfig, onSizeChanged, padding, Shapes, weight, width, } from "@expo/ui/jetpack-compose/modifiers"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Keyboard, useWindowDimensions, View } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useCSSVariable } from "uniwind"; import { cn } from "@/lib/utils"; import { BottomSheetContext, useBottomSheetContext, } from "./bottom-sheet-context"; import { bottomSheetSlots } from "./bottom-sheet-slots"; import type { BottomSheetContentProps, BottomSheetFooterProps, } from "./bottom-sheet-types"; // Constants const BOTTOM_SHEET_PADDING = 16; const DRAG_HANDLE_WIDTH = 38; const DRAG_HANDLE_HEIGHT = 6; // Components const BottomSheetDragHandle = () => { const handleColor = useCSSVariable("--color-muted-foreground") as string; return ( ); }; export const BottomSheetContent = (props: BottomSheetContentProps) => { return ( ); }; const BottomSheetContentView = ({ showDragIndicator = true, snapPoints, className, children, style, ...props }: BottomSheetContentProps) => { const { open, onOpenChange } = useBottomSheetContext(); const sheetRef = useRef(null); const [visible, setVisible] = useState(open); const backgroundColor = useCSSVariable("--color-background") as string; const { width: windowWidth } = useWindowDimensions(); const hasFooter = bottomSheetSlots.useHasSlot("footer"); const [sheetWidth, setSheetWidth] = useState(0); const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0); const fitToContents = !hasSnapPoints; const sheetContext = useMemo( () => ({ fitToContents, onOpenChange, open, sheetWidth, }), [fitToContents, onOpenChange, open, sheetWidth] ); const handleSheetSizeChanged = useCallback( ({ width: nextWidth }: { width: number; height: number }) => { setSheetWidth((current) => (current === nextWidth ? current : nextWidth)); }, [] ); useEffect(() => { if (open) { setVisible(true); return; } let cancelled = false; sheetRef.current?.hide().then(() => { if (!cancelled) { setVisible(false); } }); return () => { cancelled = true; }; }, [open]); const handleDismiss = useCallback(() => { onOpenChange(false); }, [onOpenChange]); const contentModifiers = useMemo(() => { const modifiers: ModifierConfig[] = [ fillMaxWidth(), onSizeChanged(handleSheetSizeChanged), ]; if (shouldFillMaxHeight(snapPoints)) { modifiers.push(fillMaxHeight(0.95)); } if (hasFooter) { modifiers.push(imePadding()); } return modifiers; }, [handleSheetSizeChanged, hasFooter, snapPoints]); useEffect(() => { if (!(open && hasFooter)) { return; } const showSub = Keyboard.addListener("keyboardDidShow", () => { sheetRef.current?.expand(); }); return () => { showSub.remove(); }; }, [hasFooter, open]); if (!visible) { return null; } return ( {showDragIndicator ? : null} 0 ? { width: sheetWidth } : undefined : { flexGrow: 1, height: 0 }, style, ]} > {children} ); }; export const BottomSheetFooter = ({ className, style, children, ...props }: BottomSheetFooterProps) => { const { bottom: safeAreaBottom } = useSafeAreaInsets(); const { sheetWidth = 0 } = useBottomSheetContext(); return ( 0 ? { width: sheetWidth } : null), }, style, ]} {...props} > {children} ); }; BottomSheetFooter.displayName = "BottomSheetFooter"; // Utils const shouldSkipPartiallyExpanded = ( snapPoints: SnapPoint[] | undefined ): boolean => { if (!snapPoints || snapPoints.length === 0) { return false; } return !snapPoints.some( (snapPoint) => snapPoint === "half" || (typeof snapPoint === "object" && "fraction" in snapPoint && snapPoint.fraction < 1) || (typeof snapPoint === "object" && "height" in snapPoint) ); }; const shouldFillMaxHeight = (snapPoints: SnapPoint[] | undefined): boolean => { if (!snapPoints || snapPoints.length === 0) { return false; } return snapPoints.some( (snapPoint) => snapPoint === "full" || (typeof snapPoint === "object" && "fraction" in snapPoint && snapPoint.fraction >= 1) ); }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@expo/ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40expo%2Fui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@expo/ui"}]]}]}],["$","li","react-native-reanimated",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-reanimated","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-native-reanimated"}]]}]}],["$","li","react-native-keyboard-controller",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-keyboard-controller","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-native-keyboard-controller"}]]}]}],["$","li","react-native-safe-area-context",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-safe-area-context","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-native-safe-area-context"}]]}]}]]}],["$","$L51",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/button","@tetra-ui/icons","@tetra-ui/slot","@tetra-ui/slots"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/bottom-sheet/index.ts","content":"export * from \"./bottom-sheet\";\nexport * from \"./bottom-sheet-common\";\n","type":"registry:ui","target":"@ui/bottom-sheet/index.ts"},{"path":"ui/bottom-sheet/bottom-sheet-types.ts","content":"import type { SnapPoint } from \"@expo/ui\";\nimport type { PressableProps, ViewProps } from \"react-native\";\n\nexport type BottomSheetProps = {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n children: React.ReactNode;\n};\n\nexport type BottomSheetContentProps = ViewProps & {\n children: React.ReactNode;\n snapPoints?: SnapPoint[];\n showDragIndicator?: boolean;\n className?: string;\n};\n\nexport type BottomSheetBodyProps = {\n children: React.ReactNode;\n className?: string;\n};\n\nexport type BottomSheetTriggerProps = PressableProps & {\n asChild?: boolean;\n};\n\nexport type BottomSheetCloseProps = PressableProps & {\n asChild?: boolean;\n};\n\nexport type BottomSheetFooterProps = ViewProps;\n","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet-types.ts"},{"path":"ui/bottom-sheet/bottom-sheet-slots.ts","content":"import { createSlots } from \"@/lib/slots\";\n\nexport const bottomSheetSlots = createSlots<\"footer\" | \"scroll\">({\n errorMessage: \"BottomSheet parts must be rendered inside BottomSheetContent\",\n});\n","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet-slots.ts"},{"path":"ui/bottom-sheet/bottom-sheet-context.ts","content":"import { createContext, useContext } from \"react\";\n\ntype BottomSheetContextValue = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n fitToContents: boolean;\n /** Android: measured Compose sheet width in dp. Omitted on other platforms. */\n sheetWidth?: number;\n};\n\nexport const BottomSheetContext = createContext(\n null\n);\n\nexport const useBottomSheetContext = () => {\n const context = useContext(BottomSheetContext);\n if (!context) {\n throw new Error(\"useBottomSheetContext must be used within an BottomSheet\");\n }\n return context;\n};\n","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet-context.ts"},{"path":"ui/bottom-sheet/bottom-sheet-common.tsx","content":"$53","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet-common.tsx"},{"path":"ui/bottom-sheet/bottom-sheet.tsx","content":"import type {\n BottomSheetContentProps,\n BottomSheetFooterProps,\n} from \"./bottom-sheet-types\";\n\nexport const BottomSheetContent = (_: BottomSheetContentProps) => {\n return null;\n};\n\nexport const BottomSheetFooter = (_: BottomSheetFooterProps) => {\n return null;\n};\n","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet.tsx"},{"path":"ui/bottom-sheet/bottom-sheet.ios.tsx","content":"$54","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet.ios.tsx"},{"path":"ui/bottom-sheet/bottom-sheet.android.tsx","content":"$55","type":"registry:ui","target":"@ui/bottom-sheet/bottom-sheet.android.tsx"}],"className":"h-[70svh] min-h-80"}]]}]