{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "type": "registry:ui",
  "title": "Toast",
  "description": "A toast component for React Native applications.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/toast/toast.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { Animated, StyleSheet, Text, View } from \"react-native\";\n\ntype ToastType = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\ninterface ToastContextValue {\n\tshow: (message: string, type?: ToastType) => void;\n}\n\nconst ToastContext = React.createContext<ToastContextValue | undefined>(\n\tundefined,\n);\n\nexport const useToast = () => {\n\tconst context = React.useContext(ToastContext);\n\tif (!context) {\n\t\tthrow new Error(\"useToast must be used within a ToastProvider\");\n\t}\n\treturn context;\n};\n\nconst toastVariants = cva(\"px-5 py-4 rounded-2xl border\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"bg-background border-border backdrop-blur-sm\",\n\t\t\tsuccess:\n\t\t\t\t\"bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800 backdrop-blur-sm\",\n\t\t\terror:\n\t\t\t\t\"bg-red-50 border-red-200 dark:bg-red-950 dark:border-red-800 backdrop-blur-sm\",\n\t\t\twarning:\n\t\t\t\t\"bg-yellow-50 border-yellow-200 dark:bg-yellow-950 dark:border-yellow-800 backdrop-blur-sm\",\n\t\t\tinfo: \"bg-blue-50 border-blue-200 dark:bg-blue-950 dark:border-blue-800 backdrop-blur-sm\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\nconst toastTextVariants = cva(\"text-sm font-medium\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"text-foreground\",\n\t\t\tsuccess: \"text-green-900 dark:text-green-100\",\n\t\t\terror: \"text-red-900 dark:text-red-100\",\n\t\t\twarning: \"text-yellow-900 dark:text-yellow-100\",\n\t\t\tinfo: \"text-blue-900 dark:text-blue-100\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\ninterface ToastProviderProps {\n\tchildren: React.ReactNode;\n\tduration?: number;\n\tposition?: \"top\" | \"bottom\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n}\n\nexport function ToastProvider({\n\tchildren,\n\tduration = 3000,\n\tposition = \"bottom\",\n}: ToastProviderProps) {\n\tconst [toast, setToast] = React.useState<{\n\t\tmessage: string;\n\t\ttype: ToastType;\n\t} | null>(null);\n\tconst fadeAnim = React.useRef(new Animated.Value(0)).current;\n\tconst timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n\t\tundefined,\n\t);\n\n\tconst show = React.useCallback(\n\t\t(message: string, type: ToastType = \"default\") => {\n\t\t\tif (timeoutRef.current) {\n\t\t\t\tclearTimeout(timeoutRef.current);\n\t\t\t}\n\n\t\t\tsetToast({ message, type });\n\n\t\t\tAnimated.timing(fadeAnim, {\n\t\t\t\ttoValue: 1,\n\t\t\t\tduration: 200,\n\t\t\t\tuseNativeDriver: true,\n\t\t\t}).start(() => {\n\t\t\t\ttimeoutRef.current = setTimeout(() => {\n\t\t\t\t\tAnimated.timing(fadeAnim, {\n\t\t\t\t\t\ttoValue: 0,\n\t\t\t\t\t\tduration: 200,\n\t\t\t\t\t\tuseNativeDriver: true,\n\t\t\t\t\t}).start(() => setToast(null));\n\t\t\t\t}, duration);\n\t\t\t});\n\t\t},\n\t\t[fadeAnim, duration],\n\t);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tif (timeoutRef.current) {\n\t\t\t\tclearTimeout(timeoutRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst getPositionStyle = () => {\n\t\tconst sideMargin = 16;\n\n\t\tswitch (position) {\n\t\t\tcase \"top\":\n\t\t\t\treturn { top: 50, alignSelf: \"center\" as const };\n\t\t\tcase \"bottom\":\n\t\t\t\treturn { bottom: 50, alignSelf: \"center\" as const };\n\t\t\tcase \"top-left\":\n\t\t\t\treturn { top: 50, left: sideMargin, alignSelf: \"flex-start\" as const };\n\t\t\tcase \"top-right\":\n\t\t\t\treturn { top: 50, right: sideMargin, alignSelf: \"flex-end\" as const };\n\t\t\tcase \"bottom-left\":\n\t\t\t\treturn { bottom: 50, left: sideMargin, alignSelf: \"flex-start\" as const };\n\t\t\tcase \"bottom-right\":\n\t\t\t\treturn { bottom: 50, right: sideMargin, alignSelf: \"flex-end\" as const };\n\t\t\tdefault:\n\t\t\t\treturn { bottom: 50, alignSelf: \"center\" as const };\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToastContext.Provider value={{ show }}>\n\t\t\t{children}\n\t\t\t{toast && (\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={[\n\t\t\t\t\t\tstyles.container,\n\t\t\t\t\t\tgetPositionStyle(),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\topacity: fadeAnim,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttranslateY: fadeAnim.interpolate({\n\t\t\t\t\t\t\t\t\t\tinputRange: [0, 1],\n\t\t\t\t\t\t\t\t\t\toutputRange: position.includes(\"top\") ? [-40, 0] : [40, 0],\n\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View className={cn(toastVariants({ variant: toast.type }))}>\n\t\t\t\t\t\t<Text className={cn(toastTextVariants({ variant: toast.type }))}>\n\t\t\t\t\t\t\t{toast.message}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t</Animated.View>\n\t\t\t)}\n\t\t</ToastContext.Provider>\n\t);\n}\n\nconst styles = StyleSheet.create({\n\tcontainer: {\n\t\tposition: \"absolute\",\n\t\talignItems: \"center\",\n\t\tzIndex: 9999,\n\t\tshadowColor: \"#000\",\n\t\tshadowOffset: {\n\t\t\twidth: 0,\n\t\t\theight: 4,\n\t\t},\n\t\tshadowOpacity: 0.15,\n\t\tshadowRadius: 12,\n\t\televation: 8,\n\t},\n});\n\nexport { toastTextVariants, toastVariants };\nexport type { ToastProviderProps, ToastType };\n\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Button } from \"@/components/ui/button\";\nimport { ToastProvider, useToast } from \"@/components/ui/toast\";\nimport { Feather } from \"@expo/vector-icons\";\nimport { useColorScheme } from \"nativewind\";\nimport React, { useState } from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function ToastUsageExample() {\n\tconst [position, setPosition] = useState<\"top\" | \"bottom\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\">(\"bottom\");\n\tconst [duration, setDuration] = useState(3000);\n\n\treturn (\n\t\t<ToastProvider duration={duration} position={position}>\n\t\t\t<ToastDemo position={position} setPosition={setPosition} />\n\t\t</ToastProvider>\n\t);\n}\n\ninterface ToastDemoProps {\n\tposition: \"top\" | \"bottom\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\tsetPosition: (position: \"top\" | \"bottom\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\") => void;\n}\n\nfunction ToastDemo({ position, setPosition }: ToastDemoProps) {\n\tconst { show } = useToast();\n\tconst { colorScheme } = useColorScheme();\n\tconst isDark = colorScheme === \"dark\";\n\n\t// Fonction utilitaire pour éviter les changements dynamiques de classes\n\tconst getButtonTextClass = (isActive: boolean) => {\n\t\treturn isActive\n\t\t\t? \"text-primary-foreground dark:text-primary-foreground\"\n\t\t\t: \"text-foreground dark:text-foreground\";\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n\t\t\t\t<ScrollView className=\"px-5 py-5\">\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-2xl font-bold mb-2 text-foreground\">\n\t\t\t\t\t\t\tToast\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text className=\"text-base mb-4 text-muted-foreground\">\n\t\t\t\t\t\t\tDisplays brief messages or notifications to users with different types and styles\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text className=\"text-base mb-4 text-foreground\">\n\t\t\t\t\t\t\tCurrent mode: {isDark ? 'dark' : 'light'}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tToast Positioning\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text className=\"text-sm mb-4 text-muted-foreground\">\n\t\t\t\t\t\t\tCurrent position: {position}\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-3\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-2 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"position-top\"\n\t\t\t\t\t\t\t\t\tvariant={position === \"top\" ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonPress={() => setPosition(\"top\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className={getButtonTextClass(position === \"top\")}>\n\t\t\t\t\t\t\t\t\t\tTop\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"position-bottom\"\n\t\t\t\t\t\t\t\t\tvariant={position === \"bottom\" ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonPress={() => setPosition(\"bottom\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className={getButtonTextClass(position === \"bottom\")}>\n\t\t\t\t\t\t\t\t\t\tBottom\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"position-top-left\"\n\t\t\t\t\t\t\t\t\tvariant={position === \"top-left\" ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonPress={() => setPosition(\"top-left\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className={getButtonTextClass(position === \"top-left\")}>\n\t\t\t\t\t\t\t\t\t\tTop Left\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t<View className=\"flex-row gap-2 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"position-top-right\"\n\t\t\t\t\t\t\t\t\tvariant={position === \"top-right\" ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonPress={() => setPosition(\"top-right\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className={getButtonTextClass(position === \"top-right\")}>\n\t\t\t\t\t\t\t\t\t\tTop Right\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"position-bottom-left\"\n\t\t\t\t\t\t\t\t\tvariant={position === \"bottom-left\" ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonPress={() => setPosition(\"bottom-left\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className={getButtonTextClass(position === \"bottom-left\")}>\n\t\t\t\t\t\t\t\t\t\tBottom Left\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"position-bottom-right\"\n\t\t\t\t\t\t\t\t\tvariant={position === \"bottom-right\" ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonPress={() => setPosition(\"bottom-right\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className={getButtonTextClass(position === \"bottom-right\")}>\n\t\t\t\t\t\t\t\t\t\tBottom Right\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t<View className=\"mt-4\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey=\"test-position-button\"\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tonPress={() => show(`Toast positioned at ${position}`, \"info\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Text className=\"text-secondary-foreground dark:text-secondary-foreground\">\n\t\t\t\t\t\t\t\t\tTest Current Position\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tToast Types\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"toast-default\"\n\t\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"This is a default toast message\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground\">\n\t\t\t\t\t\t\t\t\t\tDefault\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"toast-success\"\n\t\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Operation completed successfully!\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground\">\n\t\t\t\t\t\t\t\t\t\tSuccess\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"toast-error\"\n\t\t\t\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Something went wrong!\", \"error\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-destructive-foreground dark:text-destructive-foreground\">\n\t\t\t\t\t\t\t\t\t\tError\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"toast-warning\"\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Please check your input\", \"warning\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground\">Warning</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey=\"toast-info\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"New information available\", \"info\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-secondary-foreground dark:text-secondary-foreground\">\n\t\t\t\t\t\t\t\t\t\tInfo\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tCommon Use Cases\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Changes saved successfully!\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"save\" size={16} color={isDark ? \"#111827\" : \"white\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tSave Action\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Item deleted permanently\", \"error\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"trash-2\" size={16} color={isDark ? \"#111827\" : \"white\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-destructive-foreground dark:text-destructive-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tDelete Action\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"File uploaded successfully\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"upload\" size={16} color={isDark ? \"white\" : \"#111827\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tUpload Complete\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Connection lost. Retrying...\", \"warning\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"wifi-off\" size={16} color={isDark ? \"white\" : \"#171717\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-secondary-foreground dark:text-secondary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tNetwork Issue\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tInteractive Examples\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Welcome back! You have 3 new messages\", \"info\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground\">\n\t\t\t\t\t\t\t\t\t\tWelcome Message\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Profile updated successfully\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground\">\n\t\t\t\t\t\t\t\t\t\tProfile Update\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Session expired. Please log in again\", \"warning\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-secondary-foreground dark:text-secondary-foreground\">\n\t\t\t\t\t\t\t\t\t\tSession Expired\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Failed to load data. Please try again\", \"error\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-destructive-foreground dark:text-destructive-foreground\">\n\t\t\t\t\t\t\t\t\t\tLoad Error\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tLong Messages\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\tonPress={() => show(\"This is a longer toast message that demonstrates how the component handles extended text content and wraps appropriately\", \"info\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground\">\n\t\t\t\t\t\t\t\t\tLong Message\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tQuick Actions\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Copied to clipboard!\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"copy\" size={16} color={isDark ? \"#111827\" : \"white\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tCopy\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Added to favorites\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"heart\" size={16} color={isDark ? \"white\" : \"#111827\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tFavorite\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Shared successfully\", \"info\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"share\" size={16} color={isDark ? \"white\" : \"#171717\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-secondary-foreground dark:text-secondary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tShare\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Download started\", \"info\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather name=\"download\" size={16} color={isDark ? \"#111827\" : \"white\"} />\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t</ScrollView>\n\t\t\t</SafeAreaView>\n\t\t</>\n\t);\n}",
  "customPreview": "import { Button } from \"@/components/ui/button\";\nimport { ToastProvider, useToast } from \"@/components/ui/toast\";\nimport { Feather } from \"@expo/vector-icons\";\nimport { useColorScheme } from \"nativewind\";\nimport React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nfunction ToastScreen() {\n\tconst { show } = useToast();\n\tconst { colorScheme } = useColorScheme();\n\tconst isDark = colorScheme === \"dark\";\n\n\tReact.useEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tshow(\"Toast component loaded successfully!\", \"success\");\n\t\t}, 500);\n\t\treturn () => clearTimeout(timer);\n\t}, [show]);\n\n\treturn (\n\t\t<>\n\t\t\t<SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n\t\t\t\t<ScrollView className=\"px-5 py-5\">\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-2xl font-bold mb-2 text-foreground\">\n\t\t\t\t\t\t\tToast\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text className=\"text-base mb-4 text-muted-foreground\">\n\t\t\t\t\t\t\tDisplay temporary notification messages\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text className=\"text-base mb-4 text-foreground\">\n\t\t\t\t\t\t\tCurrent mode: {isDark ? \"dark\" : \"light\"}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tToast Variants\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button onPress={() => show(\"This is a default toast\")}>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground\">\n\t\t\t\t\t\t\t\t\t\tDefault\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Operation successful!\", \"success\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather\n\t\t\t\t\t\t\t\t\t\tname=\"check-circle\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\tcolor={isDark ? \"white\" : \"#111827\"}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tSuccess\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Something went wrong\", \"error\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather\n\t\t\t\t\t\t\t\t\t\tname=\"alert-circle\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\tcolor={isDark ? \"#111827\" : \"white\"}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-destructive-foreground dark:text-destructive-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tError\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Please review your changes\", \"warning\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather\n\t\t\t\t\t\t\t\t\t\tname=\"alert-triangle\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\tcolor={isDark ? \"white\" : \"#111827\"}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-secondary-foreground dark:text-secondary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tWarning\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tonPress={() => show(\"Here's some information\", \"info\")}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather\n\t\t\t\t\t\t\t\t\t\tname=\"info\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\tcolor={isDark ? \"white\" : \"#111827\"}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tInfo\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<View className=\"mb-6\">\n\t\t\t\t\t\t<Text className=\"text-xl font-semibold mb-4 text-foreground\">\n\t\t\t\t\t\t\tToast with Actions\n\t\t\t\t\t\t</Text>\n\n\t\t\t\t\t\t<View className=\"gap-4\">\n\t\t\t\t\t\t\t<View className=\"flex-row gap-3 flex-wrap\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonPress={async () => {\n\t\t\t\t\t\t\t\t\t\tshow(\"Processing...\", \"info\");\n\t\t\t\t\t\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 1500));\n\t\t\t\t\t\t\t\t\t\tshow(\"Changes saved successfully!\", \"success\");\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather\n\t\t\t\t\t\t\t\t\t\tname=\"save\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\tcolor={isDark ? \"#111827\" : \"white\"}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-primary-foreground dark:text-primary-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tSave Changes\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonPress={async () => {\n\t\t\t\t\t\t\t\t\t\tshow(\"Uploading file...\", \"info\");\n\t\t\t\t\t\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 2000));\n\t\t\t\t\t\t\t\t\t\tshow(\"File uploaded!\", \"success\");\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Feather\n\t\t\t\t\t\t\t\t\t\tname=\"upload\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\tcolor={isDark ? \"white\" : \"#111827\"}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Text className=\"text-foreground dark:text-foreground ml-2\">\n\t\t\t\t\t\t\t\t\t\tUpload File\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t</ScrollView>\n\t\t\t</SafeAreaView>\n\t\t</>\n\t);\n}\n\nexport default function ToastPreview() {\n\treturn (\n\t\t<ToastProvider duration={3000} position=\"bottom\">\n\t\t\t<ToastScreen />\n\t\t</ToastProvider>\n\t);\n}"
}