{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "A collapsible component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/collapsible/collapsible.tsx",
      "content": "import * as React from \"react\";\nimport {\n  View,\n  Pressable,\n  LayoutAnimation,\n  Platform,\n  UIManager,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\nimport { Feather } from \"@expo/vector-icons\";\n\n// Enable layout animation for Android\nif (Platform.OS === \"android\") {\n  if (UIManager.setLayoutAnimationEnabledExperimental) {\n    UIManager.setLayoutAnimationEnabledExperimental(true);\n  }\n}\n\ninterface CollapsibleContextValue {\n  open: boolean;\n  toggle: () => void;\n}\n\nconst CollapsibleContext = React.createContext<CollapsibleContextValue | null>(\n  null\n);\n\ninterface CollapsibleProps {\n  children: React.ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n  className?: string;\n  disabled?: boolean;\n}\n\nconst Collapsible = React.forwardRef<View, CollapsibleProps>(\n  (\n    {\n      children,\n      className,\n      open,\n      onOpenChange,\n      defaultOpen = false,\n      disabled = false,\n      ...props\n    },\n    ref\n  ) => {\n    const [isOpen, setIsOpen] = React.useState(\n      open !== undefined ? open : defaultOpen\n    );\n\n    const isControlled = open !== undefined;\n    const currentOpen = isControlled ? open : isOpen;\n\n    const toggle = React.useCallback(() => {\n      if (!disabled) {\n        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n\n        if (!isControlled) {\n          setIsOpen(!currentOpen);\n        }\n\n        if (onOpenChange) {\n          onOpenChange(!currentOpen);\n        }\n      }\n    }, [currentOpen, isControlled, onOpenChange, disabled]);\n\n    React.useEffect(() => {\n      if (isControlled) {\n        setIsOpen(open || false);\n      }\n    }, [open, isControlled]);\n\n    return (\n      <CollapsibleContext.Provider value={{ open: currentOpen, toggle }}>\n        <View\n          ref={ref}\n          className={cn(\"overflow-hidden\", disabled && \"opacity-50\", className)}\n          {...props}\n        >\n          {children}\n        </View>\n      </CollapsibleContext.Provider>\n    );\n  }\n);\n\nCollapsible.displayName = \"Collapsible\";\n\ninterface CollapsibleTriggerProps {\n  children: React.ReactNode;\n  className?: string;\n  asChild?: boolean;\n  icon?: boolean;\n}\n\nconst CollapsibleTrigger = React.forwardRef<View, CollapsibleTriggerProps>(\n  ({ children, className, asChild, icon = true, ...props }, ref) => {\n    const context = React.useContext(CollapsibleContext);\n\n    if (!context) {\n      throw new Error(\"CollapsibleTrigger must be used within a Collapsible\");\n    }\n\n    const { open, toggle } = context;\n\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(children, {\n        ...props,\n        onPress: toggle,\n        accessibilityRole: \"button\",\n        accessibilityState: { expanded: open },\n      } as any);\n    }\n\n    return (\n      <Pressable\n        ref={ref as any}\n        className={cn(\n          \"flex-row items-center justify-between p-4 active:opacity-70\",\n          className\n        )}\n        onPress={toggle}\n        accessibilityRole=\"button\"\n        accessibilityState={{ expanded: open }}\n        accessibilityHint=\"Toggle collapsible section\"\n        {...props}\n      >\n        <View className=\"flex-row items-center flex-1\">{children}</View>\n        {icon && (\n          <View style={{ transform: [{ rotate: open ? \"180deg\" : \"0deg\" }] }}>\n            <Feather name=\"chevron-down\" size={20} color=\"#888\" />\n          </View>\n        )}\n      </Pressable>\n    );\n  }\n);\n\nCollapsibleTrigger.displayName = \"CollapsibleTrigger\";\n\ninterface CollapsibleContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst CollapsibleContent = React.forwardRef<View, CollapsibleContentProps>(\n  ({ children, className, ...props }, ref) => {\n    const context = React.useContext(CollapsibleContext);\n\n    if (!context) {\n      throw new Error(\"CollapsibleContent must be used within a Collapsible\");\n    }\n\n    const { open } = context;\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <View ref={ref} className={cn(\"overflow-hidden\", className)} {...props}>\n        {children}\n      </View>\n    );\n  }\n);\n\nCollapsibleContent.displayName = \"CollapsibleContent\";\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import {\n    Collapsible,\n    CollapsibleContent,\n    CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport default function CollapsibleExample() {\n\n    return (\n        <Collapsible>\n            <CollapsibleTrigger className=\"bg-card\">\n                <Text className=\"text-foreground font-medium\">\n                    What is a collapsible component?\n                </Text>\n            </CollapsibleTrigger>\n            <CollapsibleContent className=\"p-4 bg-muted/30\">\n                <Text className=\"text-muted-foreground\">\n                    A collapsible component lets you hide and show content\n                    with a smooth animation. It's commonly used for FAQs,\n                    accordion menus, and other expandable sections.\n                </Text>\n            </CollapsibleContent>\n        </Collapsible>\n    );\n}\n",
  "customPreview": "import {\n    Collapsible,\n    CollapsibleContent,\n    CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { Feather } from \"@expo/vector-icons\";\nimport * as React from \"react\";\nimport {\n    KeyboardAvoidingView,\n    Platform,\n    Pressable,\n    ScrollView,\n    Text,\n    View,\n} from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function CollapsibleExample() {\n    const [accordionOne, setAccordionOne] = React.useState(false);\n    const [accordionTwo, setAccordionTwo] = 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=\"p-4\">\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Collapsible\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                A vertically stacked set of interactive headings that can\n                                collapse and expand content sections.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Basic Collapsible\n                            </Text>\n                            <View className=\"border border-border rounded-lg overflow-hidden\">\n                                <Collapsible>\n                                    <CollapsibleTrigger className=\"bg-card\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            What is a collapsible component?\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            A collapsible component lets you hide and show content\n                                            with a smooth animation. It's commonly used for FAQs,\n                                            accordion menus, and other expandable sections.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Controlled Collapsible\n                            </Text>\n                            <View className=\"border border-border rounded-lg overflow-hidden mb-2\">\n                                <Collapsible open={accordionOne} onOpenChange={setAccordionOne}>\n                                    <CollapsibleTrigger className=\"bg-card\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            Item One\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground mb-2\">\n                                            This is a controlled collapsible component. Its open state\n                                            is managed externally.\n                                        </Text>\n                                        <Text className=\"text-muted-foreground\">\n                                            Opening this one will not automatically close others\n                                            because they're independently controlled.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n\n                            <View className=\"border border-border rounded-lg overflow-hidden\">\n                                <Collapsible open={accordionTwo} onOpenChange={setAccordionTwo}>\n                                    <CollapsibleTrigger className=\"bg-card\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            Item Two\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            This is the content for item two. You can create an\n                                            accordion effect by managing the state of multiple\n                                            collapsible components and ensuring only one is open at a\n                                            time.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n\n                            <View className=\"flex-row justify-center mt-4\">\n                                <Pressable\n                                    className=\"bg-primary py-2 px-4 rounded-md mr-2\"\n                                    onPress={() => {\n                                        setAccordionOne(true);\n                                        setAccordionTwo(false);\n                                    }}\n                                >\n                                    <Text className=\"text-primary-foreground\">Open First</Text>\n                                </Pressable>\n                                <Pressable\n                                    className=\"bg-primary py-2 px-4 rounded-md\"\n                                    onPress={() => {\n                                        setAccordionOne(false);\n                                        setAccordionTwo(true);\n                                    }}\n                                >\n                                    <Text className=\"text-primary-foreground\">Open Second</Text>\n                                </Pressable>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Default Open Example\n                            </Text>\n                            <View className=\"border border-border rounded-lg overflow-hidden\">\n                                <Collapsible defaultOpen>\n                                    <CollapsibleTrigger className=\"bg-card\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            This section is open by default\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            This collapsible uses the defaultOpen prop to start in the\n                                            open state, but can still be toggled by the user.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                FAQ Style\n                            </Text>\n                            <View className=\"divide-y divide-border border border-border rounded-lg overflow-hidden\">\n                                <Collapsible>\n                                    <CollapsibleTrigger className=\"bg-card py-4\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            How do I create a Collapsible?\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            Import the Collapsible components and use them in your\n                                            React Native app. You need the Collapsible wrapper, a\n                                            CollapsibleTrigger for the header, and CollapsibleContent\n                                            for the expandable content.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n\n                                <Collapsible>\n                                    <CollapsibleTrigger className=\"bg-card py-4\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            Can I customize the animation?\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            Yes, the animation is handled through React Native's\n                                            LayoutAnimation API. You can customize it by modifying the\n                                            animation preset in the Collapsible component.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n\n                                <Collapsible>\n                                    <CollapsibleTrigger className=\"bg-card py-4\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            Is it accessible?\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            Yes, the component includes proper accessibility\n                                            attributes like accessibilityRole and accessibilityState\n                                            to ensure it works well with screen readers and other\n                                            assistive technologies.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\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=\"mb-4\">\n                                <Collapsible className=\"border border-primary rounded-lg overflow-hidden\">\n                                    <CollapsibleTrigger className=\"bg-primary\">\n                                        <Text className=\"text-primary-foreground font-medium\">\n                                            Branded Collapsible\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-primary/10\">\n                                        <Text className=\"text-foreground\">\n                                            This collapsible uses your brand colors for a more\n                                            customized look.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n\n                            <View>\n                                <Collapsible className=\"border border-border rounded-lg overflow-hidden\">\n                                    <CollapsibleTrigger className=\"bg-card\" icon={false}>\n                                        <View className=\"flex-row items-center\">\n                                            <Feather\n                                                name=\"info\"\n                                                size={20}\n                                                color=\"#888\"\n                                                className=\"mr-2\"\n                                            />\n                                            <Text className=\"text-foreground font-medium ml-2\">\n                                                Custom Icon Collapsible\n                                            </Text>\n                                        </View>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            This example uses a custom icon instead of the default\n                                            chevron and has icon={\"{false}\"} to hide the default icon.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Disabled Example\n                            </Text>\n                            <View className=\"border border-border rounded-lg overflow-hidden\">\n                                <Collapsible disabled>\n                                    <CollapsibleTrigger className=\"bg-card\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            This collapsible is disabled\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"p-4 bg-muted/30\">\n                                        <Text className=\"text-muted-foreground\">\n                                            This content won't be visible because the collapsible is\n                                            disabled.\n                                        </Text>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Nested Example\n                            </Text>\n                            <View className=\"border border-border rounded-lg overflow-hidden\">\n                                <Collapsible>\n                                    <CollapsibleTrigger className=\"bg-card\">\n                                        <Text className=\"text-foreground font-medium\">\n                                            Settings\n                                        </Text>\n                                    </CollapsibleTrigger>\n                                    <CollapsibleContent className=\"bg-muted/30\">\n                                        <View className=\"px-4 pt-4\">\n                                            <Text className=\"text-muted-foreground mb-2\">\n                                                Configure your application settings\n                                            </Text>\n                                        </View>\n\n                                        <View className=\"pl-4\">\n                                            <Collapsible className=\"border-l border-border\">\n                                                <CollapsibleTrigger className=\"bg-transparent\">\n                                                    <Text className=\"text-foreground\">Appearance</Text>\n                                                </CollapsibleTrigger>\n                                                <CollapsibleContent className=\"p-4\">\n                                                    <View className=\"flex-row items-center justify-between mb-2\">\n                                                        <Text className=\"text-foreground\">Dark Mode</Text>\n                                                        <View className=\"w-12 h-6 bg-primary rounded-full\" />\n                                                    </View>\n                                                    <View className=\"flex-row items-center justify-between\">\n                                                        <Text className=\"text-foreground\">Font Size</Text>\n                                                        <Text className=\"text-muted-foreground\">\n                                                            Medium\n                                                        </Text>\n                                                    </View>\n                                                </CollapsibleContent>\n                                            </Collapsible>\n\n                                            <Collapsible className=\"border-l border-border\">\n                                                <CollapsibleTrigger className=\"bg-transparent\">\n                                                    <Text className=\"text-foreground\">Notifications</Text>\n                                                </CollapsibleTrigger>\n                                                <CollapsibleContent className=\"p-4\">\n                                                    <View className=\"flex-row items-center justify-between mb-2\">\n                                                        <Text className=\"text-foreground\">\n                                                            Push Notifications\n                                                        </Text>\n                                                        <View className=\"w-12 h-6 bg-muted rounded-full\" />\n                                                    </View>\n                                                    <View className=\"flex-row items-center justify-between\">\n                                                        <Text className=\"text-foreground\">\n                                                            Email Alerts\n                                                        </Text>\n                                                        <View className=\"w-12 h-6 bg-primary rounded-full\" />\n                                                    </View>\n                                                </CollapsibleContent>\n                                            </Collapsible>\n                                        </View>\n\n                                        <View className=\"p-4\">\n                                            <Pressable className=\"bg-primary py-2 rounded-md items-center\">\n                                                <Text className=\"text-primary-foreground\">\n                                                    Save Settings\n                                                </Text>\n                                            </Pressable>\n                                        </View>\n                                    </CollapsibleContent>\n                                </Collapsible>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Card with Collapsible Details\n                            </Text>\n                            <View className=\"border border-border rounded-lg overflow-hidden\">\n                                <View className=\"p-4 bg-card\">\n                                    <View className=\"flex-row items-center mb-2\">\n                                        <View className=\"w-12 h-12 bg-primary rounded-full items-center justify-center mr-3\">\n                                            <Text className=\"text-primary-foreground font-bold text-lg\">\n                                                JS\n                                            </Text>\n                                        </View>\n                                        <View>\n                                            <Text className=\"text-foreground font-bold text-lg\">\n                                                JavaScript Basics\n                                            </Text>\n                                            <Text className=\"text-muted-foreground\">\n                                                Programming Course\n                                            </Text>\n                                        </View>\n                                    </View>\n\n                                    <Text className=\"text-muted-foreground mb-4\">\n                                        Learn the fundamentals of JavaScript programming language.\n                                    </Text>\n\n                                    <Collapsible>\n                                        <CollapsibleTrigger className=\"bg-muted/30 rounded-md py-2 px-3\">\n                                            <Text className=\"text-foreground text-center\">\n                                                View Course Details\n                                            </Text>\n                                        </CollapsibleTrigger>\n                                        <CollapsibleContent className=\"mt-4 pt-4 border-t border-border\">\n                                            <View className=\"mb-3\">\n                                                <Text className=\"text-foreground font-medium mb-1\">\n                                                    Course Modules:\n                                                </Text>\n                                                <View className=\"ml-4\">\n                                                    <Text className=\"text-muted-foreground\">\n                                                        • Variables and Data Types\n                                                    </Text>\n                                                    <Text className=\"text-muted-foreground\">\n                                                        • Functions and Scope\n                                                    </Text>\n                                                    <Text className=\"text-muted-foreground\">\n                                                        • Arrays and Objects\n                                                    </Text>\n                                                    <Text className=\"text-muted-foreground\">\n                                                        • DOM Manipulation\n                                                    </Text>\n                                                </View>\n                                            </View>\n\n                                            <View className=\"mb-3\">\n                                                <Text className=\"text-foreground font-medium mb-1\">\n                                                    Duration:\n                                                </Text>\n                                                <Text className=\"text-muted-foreground\">\n                                                    4 weeks, 2 hours per week\n                                                </Text>\n                                            </View>\n\n                                            <View>\n                                                <Pressable className=\"bg-primary py-3 rounded-md items-center\">\n                                                    <Text className=\"text-primary-foreground font-medium\">\n                                                        Enroll Now\n                                                    </Text>\n                                                </Pressable>\n                                            </View>\n                                        </CollapsibleContent>\n                                    </Collapsible>\n                                </View>\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"
}