{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:ui",
  "title": "Popover",
  "description": "A popover component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/popover/popover.tsx",
      "content": "import * as React from \"react\"\nimport {\n  View,\n  Text,\n  Pressable,\n  Modal,\n  TouchableWithoutFeedback,\n  Platform,\n  Animated,\n} from \"react-native\"\nimport { cn } from \"@/lib/utils\"\n\ninterface PopoverProps {\n  children: React.ReactNode\n  className?: string\n}\n\ninterface PopoverTriggerProps {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  asChild?: boolean\n}\n\ninterface PopoverAnchorProps {\n  children: React.ReactNode\n  className?: string\n}\n\ninterface PopoverContentProps {\n  children: React.ReactNode\n  className?: string\n  align?: \"start\" | \"center\" | \"end\"\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  sideOffset?: number\n}\n\nconst PopoverContext = React.createContext<{\n  open: boolean\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>\n  triggerRef: React.RefObject<View>\n  triggerLayout: { x: number; y: number; width: number; height: number } | null\n  setTriggerLayout: React.Dispatch<React.SetStateAction<{ x: number; y: number; width: number; height: number } | null>>\n  contentLayout: { width: number; height: number } | null\n  setContentLayout: React.Dispatch<React.SetStateAction<{ width: number; height: number } | null>>\n  isAnimating: boolean\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>\n}>({\n  open: false,\n  setOpen: () => { },\n  triggerRef: { current: null },\n  triggerLayout: null,\n  setTriggerLayout: () => { },\n  contentLayout: null,\n  setContentLayout: () => { },\n  isAnimating: false,\n  setIsAnimating: () => { },\n})\n\nconst Popover = React.forwardRef<View, PopoverProps>(\n  ({ children, className, ...props }, ref) => {\n    const [open, setOpen] = React.useState(false)\n    const triggerRef = React.useRef<View>(null)\n    const [triggerLayout, setTriggerLayout] = React.useState<{ x: number; y: number; width: number; height: number } | null>(null)\n    const [contentLayout, setContentLayout] = React.useState<{ width: number; height: number } | null>(null)\n    const [isAnimating, setIsAnimating] = React.useState(false)\n\n    return (\n      <PopoverContext.Provider\n        value={{\n          open,\n          setOpen,\n          triggerRef,\n          triggerLayout,\n          setTriggerLayout,\n          contentLayout,\n          setContentLayout,\n          isAnimating,\n          setIsAnimating,\n        }}\n      >\n        <View ref={ref} className={cn(\"\", className)} {...props}>\n          {children}\n        </View>\n      </PopoverContext.Provider>\n    )\n  }\n)\n\nPopover.displayName = \"Popover\"\n\nconst PopoverTrigger = React.forwardRef<View, PopoverTriggerProps>(\n  ({ children, className, disabled = false, ...props }, ref) => {\n    const { setOpen, open, triggerRef, setTriggerLayout, isAnimating } = React.useContext(PopoverContext)\n\n    const measureTrigger = () => {\n      if (triggerRef.current) {\n        triggerRef.current.measureInWindow((x, y, width, height) => {\n          setTriggerLayout({ x, y, width, height })\n        })\n      }\n    }\n\n    return (\n      <Pressable\n        ref={triggerRef as any}\n        className={cn(\"\", className)}\n        disabled={disabled || isAnimating}\n        onPress={() => {\n          if (open) {\n            setOpen(false)\n          } else {\n            measureTrigger()\n            setOpen(true)\n          }\n        }}\n        accessibilityRole=\"button\"\n        {...props}\n      >\n        {children}\n      </Pressable>\n    )\n  }\n)\n\nPopoverTrigger.displayName = \"PopoverTrigger\"\n\nconst PopoverAnchor = React.forwardRef<View, PopoverAnchorProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <View ref={ref} className={cn(\"\", className)} {...props}>\n        {children}\n      </View>\n    )\n  }\n)\n\nPopoverAnchor.displayName = \"PopoverAnchor\"\n\nconst PopoverContent = React.forwardRef<View, PopoverContentProps>(\n  ({ children, className, align = \"center\", side = \"bottom\", sideOffset = 8, ...props }, ref) => {\n    const {\n      open,\n      setOpen,\n      triggerLayout,\n      contentLayout,\n      setContentLayout,\n      setIsAnimating,\n    } = React.useContext(PopoverContext)\n\n    const contentRef = React.useRef<View>(null)\n    const fadeAnim = React.useRef(new Animated.Value(0)).current\n\n    React.useEffect(() => {\n      if (open) {\n        setIsAnimating(true)\n        if (contentRef.current) {\n          setTimeout(() => {\n            contentRef.current?.measure((_x, _y, width, height) => {\n              setContentLayout({ width, height })\n              Animated.timing(fadeAnim, {\n                toValue: 1,\n                duration: 150, // Animation duration\n                useNativeDriver: true,\n              }).start(() => {\n                setIsAnimating(false)\n              })\n            })\n          }, 10)\n        }\n      } else {\n        // Reset fadeAnim when closed\n        fadeAnim.setValue(0)\n      }\n\n      // Cleanup animation when component unmounts\n      return () => {\n        fadeAnim.setValue(0)\n      }\n    }, [open, setContentLayout, fadeAnim, setIsAnimating])\n\n    const closePopover = React.useCallback(() => {\n      setIsAnimating(true)\n      Animated.timing(fadeAnim, {\n        toValue: 0,\n        duration: 100,\n        useNativeDriver: true,\n      }).start(() => {\n        setOpen(false)\n        setIsAnimating(false)\n      })\n    }, [fadeAnim, setOpen, setIsAnimating])\n\n    if (!open) return null\n\n    const getPosition = () => {\n      if (!triggerLayout || !contentLayout) return {}\n\n      let left = 0\n      let top = 0\n\n      // Handle horizontal alignment\n      if (align === \"start\") {\n        left = triggerLayout.x\n      } else if (align === \"center\") {\n        left = triggerLayout.x + (triggerLayout.width / 2) - (contentLayout.width / 2)\n      } else if (align === \"end\") {\n        left = triggerLayout.x + triggerLayout.width - contentLayout.width\n      }\n\n      // Handle vertical positioning\n      if (side === \"top\") {\n        top = triggerLayout.y - contentLayout.height - sideOffset\n      } else if (side === \"bottom\") {\n        top = triggerLayout.y + triggerLayout.height + sideOffset\n      } else if (side === \"left\") {\n        left = triggerLayout.x - contentLayout.width - sideOffset\n        top = triggerLayout.y + (triggerLayout.height / 2) - (contentLayout.height / 2)\n      } else if (side === \"right\") {\n        left = triggerLayout.x + triggerLayout.width + sideOffset\n        top = triggerLayout.y + (triggerLayout.height / 2) - (contentLayout.height / 2)\n      }\n\n      // Ensure the popover stays within screen bounds\n      left = Math.max(16, left)\n      top = Math.max(50, top)\n\n      return { left, top }\n    }\n\n    return (\n      <Modal\n        visible={open}\n        transparent\n        animationType=\"none\"\n        onRequestClose={closePopover}\n      >\n        <TouchableWithoutFeedback onPress={closePopover}>\n          <View className=\"flex-1\">\n            <TouchableWithoutFeedback>\n              <Animated.View\n                ref={contentRef}\n                style={[\n                  getPosition(),\n                  { opacity: fadeAnim }\n                ]}\n                className={cn(\n                  \"absolute rounded-md border border-border bg-popover p-4\",\n                  \"shadow-lg min-w-[200px] max-w-[90%]\",\n                  Platform.OS === \"ios\" ? \"ios:shadow-lg\" : \"android:elevation-4\",\n                  className\n                )}\n                {...props}\n              >\n                {children}\n              </Animated.View>\n            </TouchableWithoutFeedback>\n          </View>\n        </TouchableWithoutFeedback>\n      </Modal>\n    )\n  }\n)\n\nPopoverContent.displayName = \"PopoverContent\"\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport default function PopoverExample() {\n\n    return (\n        <Popover>\n            <PopoverTrigger className=\"bg-primary py-2 px-4 rounded-md\">\n                <Text className=\"text-primary-foreground font-medium\">\n                    Click me\n                </Text>\n            </PopoverTrigger>\n            <PopoverContent>\n                <Text className=\"text-foreground font-medium mb-1\">\n                    Popover Content\n                </Text>\n                <Text className=\"text-muted-foreground text-sm\">\n                    This is the popover content that appears when you click the trigger.\n                </Text>\n            </PopoverContent>\n        </Popover>\n    );\n}\n",
  "customPreview": "import { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport * as React from \"react\";\nimport { KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function PopoverExample() {\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <KeyboardAvoidingView\n                    behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n                    style={{ flex: 1 }}\n                    keyboardVerticalOffset={100}\n                >\n                    <ScrollView className=\"p-4\">\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Popover\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                Displays floating content in relation to a trigger element when activated.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Basic Popover\n                            </Text>\n                            <View className=\"items-center\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-primary py-2 px-4 rounded-md\">\n                                        <Text className=\"text-primary-foreground font-medium\">\n                                            Click me\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent>\n                                        <Text className=\"text-foreground font-medium mb-1\">\n                                            Popover Content\n                                        </Text>\n                                        <Text className=\"text-muted-foreground text-sm\">\n                                            This is the popover content that appears when you click the trigger.\n                                        </Text>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Different Alignments\n                            </Text>\n\n                            <View className=\"flex-row justify-between mb-4\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-secondary py-2 px-4 rounded-md\">\n                                        <Text className=\"text-secondary-foreground font-medium\">\n                                            Start Aligned\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent align=\"start\">\n                                        <Text className=\"text-foreground font-medium mb-1\">\n                                            Start Aligned\n                                        </Text>\n                                        <Text className=\"text-muted-foreground text-sm\">\n                                            This popover is aligned to the start of the trigger.\n                                        </Text>\n                                    </PopoverContent>\n                                </Popover>\n\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-secondary py-2 px-4 rounded-md\">\n                                        <Text className=\"text-secondary-foreground font-medium\">\n                                            End Aligned\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent align=\"end\">\n                                        <Text className=\"text-foreground font-medium mb-1\">\n                                            End Aligned\n                                        </Text>\n                                        <Text className=\"text-muted-foreground text-sm\">\n                                            This popover is aligned to the end of the trigger.\n                                        </Text>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Different Positions\n                            </Text>\n\n                            <View className=\"items-center mb-6\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-accent py-2 px-4 rounded-md\">\n                                        <Text className=\"text-accent-foreground font-medium\">\n                                            Top Side\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent side=\"top\">\n                                        <Text className=\"text-foreground font-medium mb-1\">\n                                            Top Popover\n                                        </Text>\n                                        <Text className=\"text-muted-foreground text-sm\">\n                                            This popover appears above the trigger.\n                                        </Text>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n\n                            <View className=\"items-center mb-6\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-accent py-2 px-4 rounded-md\">\n                                        <Text className=\"text-accent-foreground font-medium\">\n                                            Bottom with Offset\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent side=\"bottom\" sideOffset={16}>\n                                        <Text className=\"text-foreground font-medium mb-1\">\n                                            Bottom Popover with Extra Offset\n                                        </Text>\n                                        <Text className=\"text-muted-foreground text-sm\">\n                                            This popover appears below with extra spacing.\n                                        </Text>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n\n                            <View className=\"flex-row justify-center\">\n                                <View>\n                                    <Popover>\n                                        <PopoverTrigger className=\"bg-muted py-2 px-4 rounded-md\">\n                                            <Text className=\"text-muted-foreground font-medium\">\n                                                Right Side\n                                            </Text>\n                                        </PopoverTrigger>\n                                        <PopoverContent side=\"right\" align=\"center\">\n                                            <Text className=\"text-foreground font-medium mb-1\">\n                                                Right Popover\n                                            </Text>\n                                            <Text className=\"text-muted-foreground text-sm\">\n                                                This popover appears to the right of the trigger.\n                                            </Text>\n                                        </PopoverContent>\n                                    </Popover>\n                                </View>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Icon and Styling\n                            </Text>\n                            <View className=\"items-center\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-primary flex-row items-center py-2 px-4 rounded-md\">\n                                        <Text className=\"text-primary-foreground font-medium mr-2\">\n                                            Settings\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent className=\"w-56\">\n                                        <View className=\"mb-4\">\n                                            <Text className=\"text-foreground font-bold mb-2\">\n                                                Settings Menu\n                                            </Text>\n                                            <View className=\"h-px bg-border mb-2\" />\n                                        </View>\n\n                                        <Pressable\n                                            className=\"flex-row items-center py-2 mb-2 active:bg-muted rounded-sm px-1\"\n                                            onPress={() => console.log(\"Profile pressed\")}\n                                        >\n                                            <Ionicons name=\"person-outline\" size={20} color=\"#555\" className=\"mr-2\" />\n                                            <Text className=\"text-foreground ml-2\">Profile</Text>\n                                        </Pressable>\n\n                                        <Pressable\n                                            className=\"flex-row items-center py-2 mb-2 active:bg-muted rounded-sm px-1\"\n                                            onPress={() => console.log(\"Preferences pressed\")}\n                                        >\n                                            <Ionicons name=\"options-outline\" size={20} color=\"#555\" className=\"mr-2\" />\n                                            <Text className=\"text-foreground ml-2\">Preferences</Text>\n                                        </Pressable>\n\n                                        <Pressable\n                                            className=\"flex-row items-center py-2 active:bg-muted rounded-sm px-1\"\n                                            onPress={() => console.log(\"Logout pressed\")}\n                                        >\n                                            <Ionicons name=\"log-out-outline\" size={20} color=\"#555\" className=\"mr-2\" />\n                                            <Text className=\"text-foreground ml-2\">Logout</Text>\n                                        </Pressable>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Custom Styling\n                            </Text>\n                            <View className=\"items-center\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-destructive py-2 px-4 rounded-md\">\n                                        <Text className=\"text-destructive-foreground font-medium\">\n                                            Delete Item\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent className=\"bg-destructive text-destructive-foreground border-destructive\">\n                                        <Text className=\"text-destructive-foreground font-medium mb-2\">\n                                            Confirm Deletion\n                                        </Text>\n                                        <Text className=\"text-destructive-foreground opacity-90 text-sm mb-4\">\n                                            Are you sure you want to delete this item? This action cannot be undone.\n                                        </Text>\n                                        <View className=\"flex-row justify-between\">\n                                            <Pressable\n                                                className=\"bg-destructive-foreground py-2 px-3 rounded-md\"\n                                                onPress={() => console.log(\"Cancel pressed\")}\n                                            >\n                                                <Text className=\"text-destructive font-medium\">Cancel</Text>\n                                            </Pressable>\n                                            <Pressable\n                                                className=\"bg-destructive-foreground/20 py-2 px-3 rounded-md border border-destructive-foreground\"\n                                                onPress={() => console.log(\"Delete pressed\")}\n                                            >\n                                                <Text className=\"text-destructive-foreground font-medium\">Delete</Text>\n                                            </Pressable>\n                                        </View>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Interactive Example\n                            </Text>\n                            <View className=\"items-center\">\n                                <Popover>\n                                    <PopoverTrigger className=\"bg-primary py-2 px-4 rounded-md\">\n                                        <Text className=\"text-primary-foreground font-medium\">\n                                            Show Notification\n                                        </Text>\n                                    </PopoverTrigger>\n                                    <PopoverContent className=\"w-72\">\n                                        <View className=\"flex-row items-center mb-3\">\n                                            <View className=\"w-10 h-10 rounded-full bg-primary items-center justify-center mr-3\">\n                                                <Ionicons name=\"notifications\" size={20} color=\"white\" />\n                                            </View>\n                                            <View className=\"flex-1\">\n                                                <Text className=\"text-foreground font-bold\">New Message</Text>\n                                                <Text className=\"text-muted-foreground text-sm\">From: Alice Smith</Text>\n                                            </View>\n                                            <Text className=\"text-muted-foreground text-xs\">2m ago</Text>\n                                        </View>\n\n                                        <View className=\"bg-muted p-3 rounded-md mb-3\">\n                                            <Text className=\"text-foreground\">\n                                                Hi there! Just checking in about our meeting tomorrow.\n                                            </Text>\n                                        </View>\n\n                                        <View className=\"flex-row\">\n                                            <Pressable\n                                                className=\"flex-1 bg-muted mr-2 py-2 rounded-md items-center\"\n                                                onPress={() => console.log(\"Dismiss pressed\")}\n                                            >\n                                                <Text className=\"text-muted-foreground font-medium\">Dismiss</Text>\n                                            </Pressable>\n                                            <Pressable\n                                                className=\"flex-1 bg-primary py-2 rounded-md items-center\"\n                                                onPress={() => console.log(\"Reply pressed\")}\n                                            >\n                                                <Text className=\"text-primary-foreground font-medium\">Reply</Text>\n                                            </Pressable>\n                                        </View>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-24\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Card Preview Example\n                            </Text>\n                            <View className=\"items-center\">\n                                <Popover>\n                                    <PopoverTrigger>\n                                        <View className=\"flex-row items-center bg-card p-3 rounded-lg border border-border\">\n                                            <View className=\"w-12 h-12 bg-primary rounded-full mr-3 items-center justify-center\">\n                                                <Text className=\"text-primary-foreground text-lg font-bold\">JD</Text>\n                                            </View>\n                                            <View>\n                                                <Text className=\"text-foreground font-medium\">John Doe</Text>\n                                                <Text className=\"text-muted-foreground text-sm\">View Profile</Text>\n                                            </View>\n                                        </View>\n                                    </PopoverTrigger>\n                                    <PopoverContent>\n                                        <View className=\"items-center mb-3\">\n                                            <View className=\"w-16 h-16 bg-primary rounded-full mb-2 items-center justify-center\">\n                                                <Text className=\"text-primary-foreground text-xl font-bold\">JD</Text>\n                                            </View>\n                                            <Text className=\"text-foreground font-bold\">John Doe</Text>\n                                            <Text className=\"text-muted-foreground text-sm\">john.doe@example.com</Text>\n                                        </View>\n                                        <View className=\"flex-row justify-around\">\n                                            <Pressable className=\"bg-primary px-3 py-2 rounded-md\">\n                                                <Text className=\"text-primary-foreground\">View Profile</Text>\n                                            </Pressable>\n                                            <Pressable className=\"bg-secondary px-3 py-2 rounded-md\">\n                                                <Text className=\"text-secondary-foreground\">Message</Text>\n                                            </Pressable>\n                                        </View>\n                                    </PopoverContent>\n                                </Popover>\n                            </View>\n                        </View>\n\n                        {/* Extra padding to ensure good scroll */}\n                        <View className=\"h-20\" />\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}