{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "title": "Accordion",
  "description": "",
  "dependencies": [
    "@rn-primitives/accordion@^1.5.2",
    "lucide-react-native@^1.21.0",
    "react-native-reanimated@4.5.1"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/ui/accordion.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { TextClassContext } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport * as AccordionPrimitive from '@rn-primitives/accordion';\nimport { ChevronDown } from 'lucide-react-native';\nimport { Platform, Pressable, View } from 'react-native';\nimport Animated, {\n  FadeOutUp,\n  LayoutAnimationConfig,\n  LinearTransition,\n  ReduceMotion,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nfunction Accordion({\n  children,\n  ref,\n  ...props\n}: Omit<React.ComponentProps<typeof AccordionPrimitive.Root>, 'asChild'>) {\n  return (\n    <LayoutAnimationConfig skipEntering>\n      <AccordionPrimitive.Root\n        {...(props as AccordionPrimitive.RootProps)}\n        asChild={Platform.OS !== 'web'}>\n        <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>\n      </AccordionPrimitive.Root>\n    </LayoutAnimationConfig>\n  );\n}\n\nfunction AccordionItem({\n  children,\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\n        'border-border border-b',\n        Platform.select({ web: 'last:border-b-0' }),\n        className\n      )}\n      value={value}\n      asChild={Platform.OS !== 'web'}\n      {...props}>\n      <Animated.View\n        className=\"native:overflow-hidden\"\n        layout={Platform.select({ native: LinearTransition.duration(200) })}>\n        {children}\n      </Animated.View>\n    </AccordionPrimitive.Item>\n  );\n}\n\nconst Trigger = Platform.OS === 'web' ? View : Pressable;\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {\n  children?: React.ReactNode;\n}) {\n  const { isExpanded } = AccordionPrimitive.useItemContext();\n\n  const progress = useDerivedValue(\n    () => (isExpanded ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 })),\n    [isExpanded]\n  );\n  const chevronStyle = useAnimatedStyle(\n    () => ({\n      transform: [{ rotate: `${progress.value * 180}deg` }],\n    }),\n    [progress]\n  );\n\n  return (\n    <TextClassContext.Provider\n      value={cn(\n        'text-left text-base font-semibold',\n        Platform.select({ web: 'group-hover:underline' })\n      )}>\n      <AccordionPrimitive.Header>\n        <AccordionPrimitive.Trigger {...props} asChild>\n          <Trigger\n            className={cn(\n              'flex-row items-start justify-between gap-4 rounded-md py-4 disabled:opacity-50',\n              Platform.select({\n                web: 'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none [&[data-state=open]>svg]:rotate-180',\n              }),\n              className\n            )}>\n            <>{children}</>\n            <Animated.View style={chevronStyle}>\n              <Icon\n                as={ChevronDown}\n                size={16}\n                className={cn(\n                  'text-muted-foreground shrink-0',\n                  Platform.select({\n                    web: 'pointer-events-none translate-y-0.5 transition-transform duration-200',\n                  })\n                )}\n              />\n            </Animated.View>\n          </Trigger>\n        </AccordionPrimitive.Trigger>\n      </AccordionPrimitive.Header>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  const { isExpanded } = AccordionPrimitive.useItemContext();\n  return (\n    <TextClassContext.Provider value=\"text-sm\">\n      <AccordionPrimitive.Content\n        className={cn(\n          'overflow-hidden',\n          Platform.select({\n            web: isExpanded ? 'animate-accordion-down' : 'animate-accordion-up',\n          })\n        )}\n        {...props}>\n        <Animated.View\n          exiting={Platform.select({\n            native: FadeOutUp.duration(200).reduceMotion(ReduceMotion.System),\n          })}\n          className={cn('pb-4', className)}>\n          {children}\n        </Animated.View>\n      </AccordionPrimitive.Content>\n    </TextClassContext.Provider>\n  );\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n",
      "type": "registry:ui",
      "target": "components/ui/accordion.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Accordion"
    ],
    "api": "<Accordion type=\"single|multiple\" collapsible><AccordionItem value><AccordionTrigger /><AccordionContent /></AccordionItem></Accordion>"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}