{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:ui",
  "title": "Accordion",
  "description": "A accordion component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/accordion/accordion.tsx",
      "content": "import * as React from 'react';\nimport { Pressable, View, Text, LayoutAnimation, Platform, UIManager } from 'react-native';\nimport { Feather } from '@expo/vector-icons';\nimport { cn } from '@/lib/utils';\n\n// Enable layout animation for Android\nif (Platform.OS === 'android') {\n  if (UIManager.setLayoutAnimationEnabledExperimental) {\n    UIManager.setLayoutAnimationEnabledExperimental(true);\n  }\n}\n\ninterface AccordionContextValue {\n  value: string[];\n  onValueChange: (itemValue: string) => void;\n  type: 'single' | 'multiple';\n}\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\nexport interface AccordionProps {\n  type?: 'single' | 'multiple';\n  collapsible?: boolean;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst Accordion = ({\n  type = 'single',\n  collapsible = false,\n  value,\n  onValueChange,\n  defaultValue,\n  className,\n  children,\n}: AccordionProps) => {\n  const [state, setState] = React.useState<string[]>(value || defaultValue || []);\n\n  const isControlled = value !== undefined;\n  const accordionValue = isControlled ? value : state;\n\n  const handleValueChange = React.useCallback((itemValue: string) => {\n    const isSelected = accordionValue.includes(itemValue);\n\n    let newValue: string[] = [];\n\n    if (type === 'single') {\n      if (isSelected) {\n        newValue = collapsible ? [] : [itemValue];\n      } else {\n        newValue = [itemValue];\n      }\n    } else {\n      if (isSelected) {\n        newValue = accordionValue.filter((v) => v !== itemValue);\n      } else {\n        newValue = [...accordionValue, itemValue];\n      }\n    }\n\n    if (!isControlled) {\n      setState(newValue);\n    }\n\n    onValueChange?.(newValue);\n  }, [accordionValue, collapsible, isControlled, onValueChange, type]);\n\n  return (\n    <AccordionContext.Provider value={{ value: accordionValue, onValueChange: handleValueChange, type }}>\n      <View className={cn(\"w-full\", className)}>\n        {children}\n      </View>\n    </AccordionContext.Provider>\n  );\n};\n\ninterface AccordionItemProps {\n  value: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst AccordionItem = ({ value, className, children }: AccordionItemProps) => {\n  const context = React.useContext(AccordionContext);\n\n  if (!context) {\n    throw new Error('AccordionItem must be used within an Accordion');\n  }\n\n  const isExpanded = context.value.includes(value);\n\n  return (\n    <View className={cn(\"border-b border-border\", className)}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child as React.ReactElement<any>, {\n            value,\n            isExpanded,\n          });\n        }\n        return child;\n      })}\n    </View>\n  );\n};\n\ninterface AccordionTriggerProps {\n  className?: string;\n  children: React.ReactNode;\n  value?: string;\n  isExpanded?: boolean;\n}\n\nconst AccordionTrigger = ({\n  className,\n  children,\n  value,\n  isExpanded,\n}: AccordionTriggerProps) => {\n  const context = React.useContext(AccordionContext);\n\n  if (!context || value === undefined) {\n    return null;\n  }\n\n  const iconRotation = isExpanded ? 180 : 0;\n\n  const handlePress = () => {\n    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n    context.onValueChange(value);\n  };\n\n  return (\n    <Pressable\n      onPress={handlePress}\n      className={cn(\n        \"flex-row items-center justify-between py-4\",\n        className\n      )}\n      accessibilityRole=\"button\"\n      accessibilityState={{ expanded: isExpanded }}\n      accessibilityHint=\"Toggle accordion section\"\n    >\n      <View className=\"flex-1\">\n        {typeof children === 'string' ? (\n          <Text className=\"text-base font-medium text-foreground\">{children}</Text>\n        ) : (\n          children\n        )}\n      </View>\n      <View style={{ transform: [{ rotate: `${iconRotation}deg` }] }}>\n        <Feather name=\"chevron-down\" size={20} color=\"#888\" />\n      </View>\n    </Pressable>\n  );\n};\n\ninterface AccordionContentProps {\n  className?: string;\n  children: React.ReactNode;\n  value?: string;\n  isExpanded?: boolean;\n}\n\nconst AccordionContent = ({\n  className,\n  children,\n  value,\n  isExpanded,\n}: AccordionContentProps) => {\n  if (!isExpanded) {\n    return null;\n  }\n\n  return (\n    <View\n      className={cn(\"pb-4 pt-0\", className)}\n    >\n      {typeof children === 'string' ? (\n        <Text className=\"text-base text-muted-foreground\">{children}</Text>\n      ) : (\n        children\n      )}\n    </View>\n  );\n};\n\nAccordion.displayName = 'Accordion';\nAccordionItem.displayName = 'AccordionItem';\nAccordionTrigger.displayName = 'AccordionTrigger';\nAccordionContent.displayName = 'AccordionContent';\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; ",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import {\n    Accordion,\n    AccordionContent,\n    AccordionItem,\n    AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport default function AccordionExample() {\n    return (\n        <Accordion type=\"single\" defaultValue={[\"item-1\"]} collapsible>\n            <AccordionItem value=\"item-1\">\n                <AccordionTrigger>Is it accessible?</AccordionTrigger>\n                <AccordionContent>\n                    <Text className=\"text-base text-muted-foreground\">\n                        Yes. It adheres to mobile accessibility guidelines with proper touch\n                        target sizes, semantic markup, and smooth animations optimized for\n                        React Native.\n                    </Text>\n                </AccordionContent>\n            </AccordionItem>\n\n            <AccordionItem value=\"item-2\">\n                <AccordionTrigger>Is it responsive?</AccordionTrigger>\n                <AccordionContent>\n                    <Text className=\"text-base text-muted-foreground\">\n                        Yes. It's optimized for both iOS and Android experiences and\n                        follows native platform conventions while maintaining a consistent\n                        appearance.\n                    </Text>\n                </AccordionContent>\n            </AccordionItem>\n\n            <AccordionItem value=\"item-3\">\n                <AccordionTrigger>Is it customizable?</AccordionTrigger>\n                <AccordionContent>\n                    <Text className=\"text-base text-muted-foreground\">\n                        Yes. You can customize the styling using NativeWind classes or\n                        provide your own components for triggers and content. The\n                        animation is also customizable.\n                    </Text>\n                </AccordionContent>\n            </AccordionItem>\n        </Accordion>\n    );\n}\n",
  "customPreview": "import {\n    Accordion,\n    AccordionContent,\n    AccordionItem,\n    AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function AccordionExample() {\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"p-4\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Accordion\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            A vertically stacked set of interactive headings that each reveal a section of content.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Default Accordion\n                        </Text>\n                        <Accordion type=\"single\" defaultValue={[\"item-1\"]} collapsible>\n                            <AccordionItem value=\"item-1\">\n                                <AccordionTrigger>Is it accessible?</AccordionTrigger>\n                                <AccordionContent>\n                                    <Text className=\"text-base text-muted-foreground\">\n                                        Yes. It adheres to mobile accessibility guidelines with proper touch\n                                        target sizes, semantic markup, and smooth animations optimized for\n                                        React Native.\n                                    </Text>\n                                </AccordionContent>\n                            </AccordionItem>\n\n                            <AccordionItem value=\"item-2\">\n                                <AccordionTrigger>Is it responsive?</AccordionTrigger>\n                                <AccordionContent>\n                                    <Text className=\"text-base text-muted-foreground\">\n                                        Yes. It's optimized for both iOS and Android experiences and\n                                        follows native platform conventions while maintaining a consistent\n                                        appearance.\n                                    </Text>\n                                </AccordionContent>\n                            </AccordionItem>\n\n                            <AccordionItem value=\"item-3\">\n                                <AccordionTrigger>Is it customizable?</AccordionTrigger>\n                                <AccordionContent>\n                                    <Text className=\"text-base text-muted-foreground\">\n                                        Yes. You can customize the styling using NativeWind classes or\n                                        provide your own components for triggers and content. The\n                                        animation is also customizable.\n                                    </Text>\n                                </AccordionContent>\n                            </AccordionItem>\n                        </Accordion>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Multiple Expanded Items\n                        </Text>\n                        <Accordion type=\"multiple\" defaultValue={[\"item-1\", \"item-2\"]}>\n                            <AccordionItem value=\"item-1\">\n                                <AccordionTrigger>Native Mobile Design</AccordionTrigger>\n                                <AccordionContent>\n                                    <Text className=\"text-base text-muted-foreground\">\n                                        This accordion follows native mobile design patterns with appropriate\n                                        touch target sizes (at least 44×44 points on iOS, 48×48dp on Android)\n                                        and sufficient spacing between interactive elements.\n                                    </Text>\n                                </AccordionContent>\n                            </AccordionItem>\n\n                            <AccordionItem value=\"item-2\">\n                                <AccordionTrigger>Smooth Animations</AccordionTrigger>\n                                <AccordionContent>\n                                    <Text className=\"text-base text-muted-foreground\">\n                                        The animations are optimized for mobile with proper timing\n                                        and easing functions that match platform conventions. The component\n                                        uses React Native Reanimated for hardware-accelerated animations.\n                                    </Text>\n                                </AccordionContent>\n                            </AccordionItem>\n\n                            <AccordionItem value=\"item-3\">\n                                <AccordionTrigger>Accessibility Support</AccordionTrigger>\n                                <AccordionContent>\n                                    <Text className=\"text-base text-muted-foreground\">\n                                        Built with accessibility in mind, this component includes proper\n                                        accessibility roles, states, and hints for screen readers on both\n                                        iOS (VoiceOver) and Android (TalkBack).\n                                    </Text>\n                                </AccordionContent>\n                            </AccordionItem>\n                        </Accordion>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}