import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
import * as React from 'react';
import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import { buttonTextVariants, buttonVariants } from '~/components/ui/button';
import { cn } from '~/lib/utils';
import { TextClassContext } from '~/components/ui/text';
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlayWeb = React.forwardRef<
AlertDialogPrimitive.OverlayRef,
AlertDialogPrimitive.OverlayProps
>(({ className, ...props }, ref) => {
const { open } = AlertDialogPrimitive.useRootContext();
<AlertDialogPrimitive.Overlay
'z-50 bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
const AlertDialogOverlayNative = React.forwardRef<
AlertDialogPrimitive.OverlayRef,
AlertDialogPrimitive.OverlayProps
>(({ className, children, ...props }, ref) => {
<AlertDialogPrimitive.Overlay
style={StyleSheet.absoluteFill}
className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
<Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
</AlertDialogPrimitive.Overlay>
AlertDialogOverlayNative.displayName = 'AlertDialogOverlayNative';
const AlertDialogOverlay = Platform.select({
web: AlertDialogOverlayWeb,
default: AlertDialogOverlayNative,
const AlertDialogContent = React.forwardRef<
AlertDialogPrimitive.ContentRef,
AlertDialogPrimitive.ContentProps & { portalHost?: string }
>(({ className, portalHost, ...props }, ref) => {
const { open } = AlertDialogPrimitive.useRootContext();
<AlertDialogPortal hostName={portalHost}>
<AlertDialogPrimitive.Content
'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg shadow-foreground/10 web:duration-200 rounded-lg',
? 'web:animate-in web:fade-in-0 web:zoom-in-95'
: 'web:animate-out web:fade-out-0 web:zoom-out-95',
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({ className, ...props }: ViewProps) => (
<View className={cn('flex flex-col gap-2', className)} {...props} />
AlertDialogHeader.displayName = 'AlertDialogHeader';
const AlertDialogFooter = ({ className, ...props }: ViewProps) => (
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
AlertDialogFooter.displayName = 'AlertDialogFooter';
const AlertDialogTitle = React.forwardRef<
AlertDialogPrimitive.TitleRef,
AlertDialogPrimitive.TitleProps
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
className={cn('text-lg native:text-xl text-foreground font-semibold', className)}
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = React.forwardRef<
AlertDialogPrimitive.DescriptionRef,
AlertDialogPrimitive.DescriptionProps
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
className={cn('text-sm native:text-base text-muted-foreground', className)}
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = React.forwardRef<
AlertDialogPrimitive.ActionRef,
AlertDialogPrimitive.ActionProps
>(({ className, ...props }, ref) => (
<TextClassContext.Provider value={buttonTextVariants({ className })}>
<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
</TextClassContext.Provider>
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = React.forwardRef<
AlertDialogPrimitive.CancelRef,
AlertDialogPrimitive.CancelProps
>(({ className, ...props }, ref) => (
<TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
<AlertDialogPrimitive.Cancel
className={cn(buttonVariants({ variant: 'outline', className }))}
</TextClassContext.Provider>
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;