{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:ui",
  "title": "Dialog",
  "description": "A dialog component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/dialog/dialog.tsx",
      "content": "import * as React from \"react\";\nimport {\n  View,\n  Text,\n  Pressable,\n  Modal,\n  TouchableWithoutFeedback,\n  Platform,\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ScrollView,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\nimport { Ionicons } from \"@expo/vector-icons\";\n\ninterface DialogProps {\n  children: React.ReactNode;\n  className?: string;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface DialogTriggerProps {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  asChild?: boolean;\n}\n\ninterface DialogContentProps {\n  children: React.ReactNode;\n  className?: string;\n  showCloseButton?: boolean;\n  onInteractOutside?: () => void;\n}\n\ninterface DialogHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\ninterface DialogFooterProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\ninterface DialogTitleProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\ninterface DialogDescriptionProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\ninterface DialogCloseProps {\n  children: React.ReactElement<{ onPress?: (e: any) => void }>;\n  className?: string;\n}\n\nconst DialogContext = React.createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  handleClose?: () => void;\n}>({\n  open: false,\n  setOpen: () => { },\n});\n\nconst Dialog = React.forwardRef<View, DialogProps>(\n  ({ children, className, open = false, onOpenChange, ...props }, ref) => {\n    const [internalOpen, setInternalOpen] = React.useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n\n    const setOpen = React.useCallback(\n      (value: boolean) => {\n        if (!isControlled) {\n          setInternalOpen(value);\n        }\n        onOpenChange?.(value);\n      },\n      [isControlled, onOpenChange]\n    );\n\n    return (\n      <DialogContext.Provider value={{ open: isOpen, setOpen }}>\n        <View ref={ref} className={cn(\"\", className)} {...props}>\n          {children}\n        </View>\n      </DialogContext.Provider>\n    );\n  }\n);\n\nDialog.displayName = \"Dialog\";\n\nconst DialogTrigger = React.forwardRef<View, DialogTriggerProps>(\n  (\n    { children, className, disabled = false, asChild = false, ...props },\n    ref\n  ) => {\n    const { setOpen } = React.useContext(DialogContext);\n\n    if (asChild) {\n      const child = React.Children.only(children) as React.ReactElement<{\n        onPress?: (e: any) => void;\n        ref?: React.Ref<any>;\n        disabled?: boolean;\n      }>;\n      return React.cloneElement(child, {\n        ...props,\n        ref,\n        onPress: (e: any) => {\n          child.props?.onPress?.(e);\n          setOpen(true);\n        },\n        disabled,\n      });\n    }\n\n    return (\n      <Pressable\n        ref={ref}\n        className={cn(\"\", className)}\n        disabled={disabled}\n        onPress={() => setOpen(true)}\n        accessibilityRole=\"button\"\n        {...props}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n);\n\nDialogTrigger.displayName = \"DialogTrigger\";\n\nconst DialogContent = React.forwardRef<View, DialogContentProps>(\n  (\n    {\n      children,\n      className,\n      showCloseButton = true,\n      onInteractOutside,\n      ...props\n    },\n    ref\n  ) => {\n    const { open, setOpen } = React.useContext(DialogContext);\n    const fadeAnim = React.useRef(new Animated.Value(0)).current;\n    const scaleAnim = React.useRef(new Animated.Value(0.95)).current;\n    const { height: SCREEN_HEIGHT } = Dimensions.get(\"window\");\n    const [isVisible, setIsVisible] = React.useState(open);\n\n    React.useEffect(() => {\n      if (open && !isVisible) {\n        setIsVisible(true);\n      }\n    }, [open, isVisible]);\n\n    React.useEffect(() => {\n      if (isVisible) {\n        Animated.parallel([\n          Animated.timing(fadeAnim, {\n            toValue: 1,\n            duration: 200,\n            useNativeDriver: true,\n          }),\n          Animated.spring(scaleAnim, {\n            toValue: 1,\n            damping: 20,\n            stiffness: 300,\n            useNativeDriver: true,\n          }),\n        ]).start();\n      }\n    }, [isVisible, fadeAnim, scaleAnim]);\n\n    const handleClose = React.useCallback(() => {\n      Animated.parallel([\n        Animated.timing(fadeAnim, {\n          toValue: 0,\n          duration: 150,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnim, {\n          toValue: 0.95,\n          duration: 150,\n          useNativeDriver: true,\n        }),\n      ]).start(() => {\n        setIsVisible(false);\n        setOpen(false);\n      });\n    }, [fadeAnim, scaleAnim, setOpen]);\n\n    if (!isVisible) return null;\n\n    return (\n      <DialogContext.Provider value={{ open: isVisible, setOpen, handleClose }}>\n        <Modal\n          visible={isVisible}\n          transparent\n          statusBarTranslucent\n          animationType=\"none\"\n          onRequestClose={handleClose}\n        >\n          <TouchableWithoutFeedback\n            onPress={() => {\n              onInteractOutside?.();\n              handleClose();\n            }}\n          >\n            <Animated.View\n              className=\"flex-1 justify-center items-center bg-black/50\"\n              style={{ opacity: fadeAnim }}\n            >\n              <TouchableWithoutFeedback>\n                <KeyboardAvoidingView\n                  behavior={Platform.OS === \"ios\" ? \"padding\" : undefined}\n                  keyboardVerticalOffset={\n                    Platform.OS === \"ios\" ? -SCREEN_HEIGHT * 0.2 : 0\n                  }\n                >\n                  <Animated.View\n                    ref={ref}\n                    className={cn(\n                      \"bg-background m-6 rounded-2xl\",\n                      \"w-[85%] max-w-sm\",\n                      Platform.OS === \"ios\"\n                        ? \"ios:shadow-xl\"\n                        : \"android:elevation-8\",\n                      className\n                    )}\n                    style={{\n                      transform: [{ scale: scaleAnim }],\n                    }}\n                    {...props}\n                  >\n                    <ScrollView bounces={false} className=\"max-h-[80vh]\">\n                      {showCloseButton && (\n                        <Pressable\n                          onPress={handleClose}\n                          className=\"absolute right-4 top-4 z-50 rounded-full p-2 bg-muted/50\"\n                        >\n                          <Ionicons name=\"close\" size={24} color=\"#666\" />\n                        </Pressable>\n                      )}\n                      {children}\n                    </ScrollView>\n                  </Animated.View>\n                </KeyboardAvoidingView>\n              </TouchableWithoutFeedback>\n            </Animated.View>\n          </TouchableWithoutFeedback>\n        </Modal>\n      </DialogContext.Provider>\n    );\n  }\n);\n\nDialogContent.displayName = \"DialogContent\";\n\nconst DialogHeader = React.forwardRef<View, DialogHeaderProps>(\n  ({ className, children, ...props }, ref) => (\n    <View ref={ref} className={cn(\"flex-col gap-2 p-6\", className)} {...props}>\n      {children}\n    </View>\n  )\n);\n\nDialogHeader.displayName = \"DialogHeader\";\n\nconst DialogFooter = React.forwardRef<View, DialogFooterProps>(\n  ({ className, children, ...props }, ref) => (\n    <View\n      ref={ref}\n      className={cn(\n        \"flex-row justify-end items-center gap-3 p-6 pt-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </View>\n  )\n);\n\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = React.forwardRef<Text, DialogTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <Text\n      ref={ref}\n      className={cn(\n        \"text-foreground text-xl font-semibold leading-none tracking-tight\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n);\n\nDialogTitle.displayName = \"DialogTitle\";\n\nconst DialogDescription = React.forwardRef<Text, DialogDescriptionProps>(\n  ({ className, children, ...props }, ref) => (\n    <Text\n      ref={ref}\n      className={cn(\"text-muted-foreground text-base mt-2\", className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n);\n\nDialogDescription.displayName = \"DialogDescription\";\n\nconst DialogClose = React.forwardRef<View, DialogCloseProps>(\n  ({ children, ...props }, ref) => {\n    const { handleClose } = React.useContext(DialogContext);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ...props,\n      onPress: (e: any) => {\n        children.props?.onPress?.(e);\n        handleClose?.();\n      },\n    });\n  }\n);\n\nDialogClose.displayName = \"DialogClose\";\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Button } from \"@/components/ui/button\";\nimport {\n    Dialog,\n    DialogClose,\n    DialogContent,\n    DialogDescription,\n    DialogFooter,\n    DialogHeader,\n    DialogTitle,\n    DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport * as React from \"react\";\nimport { Text, View } from \"react-native\";\n\nexport default function DialogExample() {\n    const [basicOpen, setBasicOpen] = React.useState(false);\n\n    return (\n        <Dialog open={basicOpen} onOpenChange={setBasicOpen}>\n            <DialogTrigger asChild>\n                <Button variant=\"outline\" className=\"w-auto\">\n                    <Text className=\"text-foreground\">Open Dialog</Text>\n                </Button>\n            </DialogTrigger>\n            <DialogContent>\n                <DialogHeader>\n                    <DialogTitle>Basic Dialog</DialogTitle>\n                    <DialogDescription>\n                        This is a basic dialog example with a title and\n                        description.\n                    </DialogDescription>\n                </DialogHeader>\n                <View className=\"p-6 pt-0\">\n                    <Text className=\"text-foreground\">\n                        Dialogs are used to show important information that\n                        requires user attention or interaction.\n                    </Text>\n                </View>\n                <DialogFooter>\n                    <DialogClose>\n                        <Button variant=\"outline\">\n                            <Text>Close</Text>\n                        </Button>\n                    </DialogClose>\n                </DialogFooter>\n            </DialogContent>\n        </Dialog>\n    );\n}\n",
  "customPreview": "import { Button } from \"@/components/ui/button\";\nimport {\n    Dialog,\n    DialogClose,\n    DialogContent,\n    DialogDescription,\n    DialogFooter,\n    DialogHeader,\n    DialogTitle,\n    DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport * as React from \"react\";\nimport {\n    KeyboardAvoidingView,\n    Platform,\n    ScrollView,\n    Text,\n    View,\n} from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function DialogExample() {\n    const [name, setName] = React.useState(\"John Doe\");\n    const [email, setEmail] = React.useState(\"john@example.com\");\n\n    const [basicOpen, setBasicOpen] = React.useState(false);\n    const [editOpen, setEditOpen] = React.useState(false);\n    const [deleteOpen, setDeleteOpen] = React.useState(false);\n    const [successOpen, setSuccessOpen] = React.useState(false);\n    const [loadingOpen, setLoadingOpen] = React.useState(false);\n\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=\"flex-1 p-4\">\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Dialog\n                            </Text>\n                            <Text className=\"text-foregroundtext-base text-muted-foreground mb-6\">\n                                A modal dialog that interrupts the user with important content\n                                and expects a response.\n                            </Text>\n                        </View>\n\n                        {/* Basic Dialog */}\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Basic Dialog\n                            </Text>\n                            <Dialog open={basicOpen} onOpenChange={setBasicOpen}>\n                                <DialogTrigger asChild>\n                                    <Button variant=\"outline\" className=\"w-auto\">\n                                        <Text className=\"text-foreground\">Open Dialog</Text>\n                                    </Button>\n                                </DialogTrigger>\n                                <DialogContent>\n                                    <DialogHeader>\n                                        <DialogTitle>Basic Dialog</DialogTitle>\n                                        <DialogDescription>\n                                            This is a basic dialog example with a title and\n                                            description.\n                                        </DialogDescription>\n                                    </DialogHeader>\n                                    <View className=\"p-6 pt-0\">\n                                        <Text className=\"text-foreground\">\n                                            Dialogs are used to show important information that\n                                            requires user attention or interaction.\n                                        </Text>\n                                    </View>\n                                    <DialogFooter>\n                                        <DialogClose>\n                                            <Button variant=\"outline\">\n                                                <Text>Close</Text>\n                                            </Button>\n                                        </DialogClose>\n                                    </DialogFooter>\n                                </DialogContent>\n                            </Dialog>\n                        </View>\n\n                        {/* Edit Profile Dialog */}\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Edit Profile Dialog\n                            </Text>\n                            <Dialog open={editOpen} onOpenChange={setEditOpen}>\n                                <DialogTrigger asChild>\n                                    <Button>\n                                        <Text className=\"text-primary-foreground\">Edit Profile</Text>\n                                    </Button>\n                                </DialogTrigger>\n                                <DialogContent>\n                                    <DialogHeader>\n                                        <DialogTitle>Edit Profile</DialogTitle>\n                                        <DialogDescription>\n                                            Make changes to your profile information.\n                                        </DialogDescription>\n                                    </DialogHeader>\n                                    <View className=\"p-6 pt-0 space-y-4\">\n                                        <View className=\"space-y-2\">\n                                            <Label nativeID=\"name\">Name</Label>\n                                            <Input\n                                                id=\"name\"\n                                                value={name}\n                                                onChangeText={setName}\n                                                placeholder=\"Enter your name\"\n                                            />\n                                        </View>\n                                        <View className=\"space-y-2\">\n                                            <Label nativeID=\"email\">Email</Label>\n                                            <Input\n                                                id=\"email\"\n                                                value={email}\n                                                onChangeText={setEmail}\n                                                placeholder=\"Enter your email\"\n                                                keyboardType=\"email-address\"\n                                                autoCapitalize=\"none\"\n                                            />\n                                        </View>\n                                    </View>\n                                    <DialogFooter>\n                                        <DialogClose>\n                                            <Button variant=\"outline\">\n                                                <Text className=\"text-foreground\">Cancel</Text>\n                                            </Button>\n                                        </DialogClose>\n                                        <DialogClose>\n                                            <Button>\n                                                <Text className=\"text-primary-foreground\">Save Changes</Text>\n                                            </Button>\n                                        </DialogClose>\n                                    </DialogFooter>\n                                </DialogContent>\n                            </Dialog>\n                        </View>\n\n                        {/* Destructive Action Dialog */}\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Destructive Action Dialog\n                            </Text>\n                            <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>\n                                <DialogTrigger asChild>\n                                    <Button variant=\"destructive\" className=\"w-auto\">\n                                        <Text>Delete Account</Text>\n                                    </Button>\n                                </DialogTrigger>\n                                <DialogContent>\n                                    <DialogHeader>\n                                        <DialogTitle>Delete Account</DialogTitle>\n                                        <DialogDescription>\n                                            Are you sure you want to delete your account? This action\n                                            cannot be undone.\n                                        </DialogDescription>\n                                    </DialogHeader>\n                                    <View className=\"p-6 pt-0\">\n                                        <View className=\"bg-muted p-4 rounded-lg mb-4\">\n                                            <Text className=\"text-destructive font-medium mb-2\">\n                                                Warning\n                                            </Text>\n                                            <View className=\"space-y-2\">\n                                                <Text className=\"text-muted-foreground\">\n                                                    • All your data will be permanently deleted\n                                                </Text>\n                                                <Text className=\"text-muted-foreground\">\n                                                    • You will lose access to all your content\n                                                </Text>\n                                                <Text className=\"text-muted-foreground\">\n                                                    • Your username will become available for others\n                                                </Text>\n                                            </View>\n                                        </View>\n                                    </View>\n                                    <DialogFooter>\n                                        <DialogClose>\n                                            <Button variant=\"outline\" className=\"mr-2\">\n                                                <Text>Cancel</Text>\n                                            </Button>\n                                        </DialogClose>\n                                        <DialogClose>\n                                            <Button variant=\"destructive\">\n                                                <Text>Delete Account</Text>\n                                            </Button>\n                                        </DialogClose>\n                                    </DialogFooter>\n                                </DialogContent>\n                            </Dialog>\n                        </View>\n\n                        {/* Success Dialog */}\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Success Dialog\n                            </Text>\n                            <Dialog open={successOpen} onOpenChange={setSuccessOpen}>\n                                <DialogTrigger asChild>\n                                    <Button variant=\"outline\">\n                                        <Text className=\"text-foreground\">Show Success</Text>\n                                    </Button>\n                                </DialogTrigger>\n                                <DialogContent>\n                                    <DialogHeader>\n                                        <View className=\"items-center\">\n                                            <View className=\"w-12 h-12 bg-green-100 rounded-full items-center justify-center mb-4\">\n                                                <Ionicons name=\"checkmark\" size={32} color=\"green\" />\n                                            </View>\n                                            <DialogTitle>Payment Successful</DialogTitle>\n                                            <DialogDescription>\n                                                Your payment has been processed successfully.\n                                            </DialogDescription>\n                                        </View>\n                                    </DialogHeader>\n                                    <View className=\"p-6 pt-0\">\n                                        <View className=\"bg-muted p-4 rounded-lg\">\n                                            <Text className=\"text-muted-foreground text-center\">\n                                                Transaction ID: #123456789\n                                            </Text>\n                                        </View>\n                                    </View>\n                                    <DialogFooter>\n                                        <DialogClose>\n                                            <Button className=\"flex-1\">\n                                                <Text className=\"text-primary-foreground\">View Receipt</Text>\n                                            </Button>\n                                        </DialogClose>\n                                    </DialogFooter>\n                                </DialogContent>\n                            </Dialog>\n                        </View>\n\n                        {/* Loading Dialog */}\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Loading Dialog\n                            </Text>\n                            <Dialog open={loadingOpen} onOpenChange={setLoadingOpen}>\n                                <DialogTrigger asChild>\n                                    <Button variant=\"outline\">\n                                        <Text className=\"text-foreground\">Show Loading</Text>\n                                    </Button>\n                                </DialogTrigger>\n                                <DialogContent showCloseButton={false}>\n                                    <View className=\"p-6 items-center\">\n                                        <View className=\"w-12 h-12 mb-4\">\n                                            <Ionicons name=\"reload\" size={48} color=\"#666\" />\n                                        </View>\n                                        <Text className=\"text-lg font-semibold text-foreground mb-2\">\n                                            Processing\n                                        </Text>\n                                        <Text className=\"text-muted-foreground text-center\">\n                                            Please wait while we process your request...\n                                        </Text>\n                                    </View>\n                                </DialogContent>\n                            </Dialog>\n                        </View>\n\n                        <View className=\"h-20\" />\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}