50: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"] 51: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"] 52:T2b96,import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import { type GestureResponderEvent, Pressable, type PressableProps, } from "react-native"; import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated"; import { cn, mergeRefs } from "@/lib/utils"; import { ActionInput } from "@/components/ui/action-input"; import { BottomSheet, BottomSheetBody, BottomSheetContent, BottomSheetFooter, BottomSheetHeader, BottomSheetTitle, } from "@/components/ui/bottom-sheet"; import { CheckIcon, ChevronDownIcon } from "@/components/ui/icons"; import { InputAddon, type InputAddonChild, InputAddonIcon, } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverPortal, usePopover, } from "@/components/ui/popover"; import { Slot } from "@/components/ui/slot"; import { Text } from "@/components/ui/text"; // Constants const ANIMATION_DURATION = 280; const ANIMATION_EASING = Easing.out(Easing.cubic); // Types type LayoutPosition = { pageX: number; pageY: number; width: number; height: number; }; type SelectValueType = number | string; type SelectOption = { value: T; label: string; }; type SelectContextProps = { open: boolean; onOpenChange: (open: boolean) => void; options: SelectOption[]; value?: T; onValueChange: (value: T) => void; selectedValue?: T; setSelectedValue: (value: T) => void; onConfirm: (value?: T) => void; onCancel: () => void; disabled?: boolean; invalid?: boolean; placeholder: string; popoverTriggerPosition?: LayoutPosition; setPopoverTriggerPosition: (position?: LayoutPosition) => void; }; type SelectItemContextProps = { value: T; }; type SelectProps = { open?: boolean; onOpenChange?: (open: boolean) => void; options: SelectOption[]; value?: T; onValueChange?: (value: T) => void; disabled?: boolean; invalid?: boolean; placeholder?: string; children: React.ReactNode; }; type SelectTriggerProps = React.ComponentPropsWithRef & { asChild?: boolean; }; type SelectItemProps = SelectOption & Omit; type SelectContentProps = { children: | React.ReactElement> | React.ReactElement>[]; }; type SelectContentPopoverProps = React.ComponentProps< typeof PopoverContent > & SelectContentProps; type SelectContentSheetConfirmProps = PressableProps & { asChild?: boolean; }; // Context const SelectContext = createContext | null>( null ); const useSelect = () => { const context = useContext(SelectContext); if (!context) { throw new Error("useSelect must be used within a Select"); } return context; }; const SelectPopoverContext = createContext(null); const useSelectPopover = () => { const context = useContext(SelectPopoverContext); return context ?? false; }; const SelectItemContext = createContext | null>(null); const useSelectItem = () => { const context = useContext(SelectItemContext); if (!context) { throw new Error("useSelectItem must be used within a SelectItem"); } return context; }; // Components export const Select = ({ open: openProp, onOpenChange: onOpenChangeProp, value: valueProp, onValueChange: onValueChangeProp, disabled, invalid, options, placeholder = "Select...", children, }: SelectProps) => { const [internalOpen, setInternalOpen] = useState(openProp ?? false); const [internalValue, setInternalValue] = useState(); const [selectedValue, setSelectedValue] = useState(); const [popoverTriggerPosition, setPopoverTriggerPosition] = useState(); const isOpenControlled = openProp !== undefined; const open = isOpenControlled ? openProp : internalOpen; const isValueControlled = valueProp !== undefined; const value = isValueControlled ? valueProp : internalValue; useEffect(() => { setSelectedValue(value); }, [value]); const onOpenChange = useCallback( (nextOpen: boolean) => { setInternalOpen(nextOpen); onOpenChangeProp?.(nextOpen); }, [onOpenChangeProp] ); const onValueChange = useCallback( (nextValue: T) => { setInternalValue(nextValue); onValueChangeProp?.(nextValue); }, [onValueChangeProp] ); const onConfirm = useCallback( (nextValue?: T) => { const finalValue = nextValue ?? selectedValue; if (typeof finalValue !== "undefined") { onValueChange(finalValue); } onOpenChange(false); }, [onOpenChange, onValueChange, selectedValue] ); const onCancel = useCallback(() => { setSelectedValue(value); onOpenChange(false); }, [onOpenChange, value]); const ctx = useMemo( () => ({ disabled, invalid, onCancel, onConfirm, onOpenChange, onValueChange, open, options, placeholder, popoverTriggerPosition, selectedValue, setPopoverTriggerPosition, setSelectedValue, value, }), [ open, disabled, value, options, selectedValue, invalid, placeholder, onConfirm, onCancel, onOpenChange, onValueChange, popoverTriggerPosition, ] ); return ( } > {children} ); }; export const SelectTrigger = ({ asChild, ref: refProp, onPress: onPressProp, ...props }: SelectTriggerProps) => { const { disabled, open, onOpenChange, setPopoverTriggerPosition } = useSelect(); const ref = useRef>(null); const mergedRefs = mergeRefs(ref, refProp); const handlePress = useCallback( (e: GestureResponderEvent) => { onPressProp?.(e); ref.current?.measure((_x, _y, width, height, pageX, pageY) => { setPopoverTriggerPosition({ height, pageX, pageY, width, }); onOpenChange(!open); }); }, [onOpenChange, open, onPressProp, setPopoverTriggerPosition] ); const Comp = asChild ? Slot.Pressable : Pressable; return ( ); }; export const SelectInput = ({ children, ...props }: Partial>) => { const { open, placeholder, options, value, invalid, disabled } = useSelect(); const openSharedValue = useSharedValue(open ? 1 : 0); useEffect(() => { openSharedValue.value = withTiming(open ? 1 : 0, { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, }); }, [open, openSharedValue]); const animatedStyle = useAnimatedStyle(() => { const rotate = interpolate(openSharedValue.value, [0, 1], [0, 180]); return { transform: [{ rotate: `${rotate}deg` }], }; }); const valueLabel = useMemo(() => { return options.find((option) => option.value === value)?.label; }, [options, value]); return ( {children as InputAddonChild} ); }; export const SelectItemLabel = (props: React.ComponentProps) => { return ( ); }; export const SelectItemIndicator = ({ className, ...props }: React.ComponentProps) => { const { value: itemValue } = useSelectItem(); const { selectedValue } = useSelect(); if (itemValue !== selectedValue) { return null; } return ( ); }; export const SelectItem = ({ value, label, children, className, ...props }: SelectItemProps) => { const { setSelectedValue, onConfirm } = useSelect(); const isSelectPopover = useSelectPopover(); const onPress = useCallback(() => { setSelectedValue(value); if (isSelectPopover) { onConfirm(value); } }, [setSelectedValue, onConfirm, value, isSelectPopover]); return ( {children ?? ( <> {label} )} ); }; export const SelectContentSheet = ({ children, }: SelectContentProps) => { const ctx = useSelect(); return ( {children} ); }; export const SelectContentSheetHeader = BottomSheetHeader; export const SelectContentSheetTitle = BottomSheetTitle; export const SelectContentSheetBody = BottomSheetBody; export const SelectContentSheetFooter = BottomSheetFooter; export const SelectContentSheetConfirm = ({ asChild, ...props }: SelectContentSheetConfirmProps) => { const { onConfirm } = useSelect(); const onPress = useCallback(() => { onConfirm(); }, [onConfirm]); const Comp = asChild ? Slot.Pressable : Pressable; return ; }; const SelectContentPopoverAnchor = () => { const { popoverTriggerPosition } = useSelect(); const { setTriggerPosition } = usePopover(); useEffect(() => { if (popoverTriggerPosition) { setTriggerPosition(popoverTriggerPosition); } return () => { setTriggerPosition(undefined); }; }, [popoverTriggerPosition, setTriggerPosition]); return null; }; export const SelectContentPopover = ({ width = "trigger", ...props }: SelectContentPopoverProps) => { const ctx = useSelect(); return ( ); }; 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/action-input","@tetra-ui/bottom-sheet","@tetra-ui/icons","@tetra-ui/input","@tetra-ui/popover","@tetra-ui/slot","@tetra-ui/text"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/select.tsx","content":"$52","type":"registry:ui","target":"@ui/select.tsx"}],"className":"h-[70svh] min-h-80"}]]}]