{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "Dropdown menu",
  "description": "pass `insets`",
  "dependencies": [
    "@rn-primitives/dropdown-menu@^1.5.2",
    "lucide-react-native@^1.21.0",
    "react-native-reanimated@4.5.1",
    "react-native-screens@~4.26.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text",
    "https://reactnativereusables.com/r/nativewind/native-only-animated-view.json"
  ],
  "files": [
    {
      "path": "components/ui/dropdown-menu.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { NativeOnlyAnimatedView } from '@/components/ui/native-only-animated-view';\nimport { TextClassContext } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';\nimport { Check, ChevronDown, ChevronRight, ChevronUp } from 'lucide-react-native';\nimport * as React from 'react';\nimport {\n  Platform,\n  type StyleProp,\n  StyleSheet,\n  Text,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport { FadeIn, ReduceMotion } from 'react-native-reanimated';\nimport { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  iconClassName,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n    children?: React.ReactNode;\n    iconClassName?: string;\n    inset?: boolean;\n  }) {\n  const { open } = DropdownMenuPrimitive.useSubContext();\n  const icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;\n  return (\n    <TextClassContext.Provider\n      value={cn(\n        'text-sm select-none group-active:text-accent-foreground',\n        open && 'text-accent-foreground'\n      )}>\n      <DropdownMenuPrimitive.SubTrigger\n        className={cn(\n          'active:bg-accent group flex flex-row items-center rounded-sm px-2 py-2 sm:py-1.5',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none',\n          }),\n          className,\n          open && 'bg-accent',\n          inset && 'pl-8'\n        )}\n        {...props}>\n        <>{children}</>\n        <Icon as={icon} className={cn('text-foreground ml-auto size-4 shrink-0', iconClassName)} />\n      </DropdownMenuPrimitive.SubTrigger>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <NativeOnlyAnimatedView entering={FadeIn.reduceMotion(ReduceMotion.System)}>\n      <DropdownMenuPrimitive.SubContent\n        className={cn(\n          'bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg',\n          Platform.select({\n            web: 'animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]',\n          }),\n          className\n        )}\n        {...props}\n      />\n    </NativeOnlyAnimatedView>\n  );\n}\n\nconst FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;\n\nfunction DropdownMenuContent({\n  className,\n  overlayClassName,\n  overlayStyle,\n  portalHost,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {\n    overlayStyle?: StyleProp<ViewStyle>;\n    overlayClassName?: string;\n    portalHost?: string;\n  }) {\n  return (\n    <DropdownMenuPrimitive.Portal hostName={portalHost}>\n      <FullWindowOverlay>\n        <DropdownMenuPrimitive.Overlay\n          style={Platform.select<StyleProp<ViewStyle>>({\n            web: overlayStyle ?? undefined,\n            native: overlayStyle\n              ? StyleSheet.flatten([StyleSheet.absoluteFill, overlayStyle])\n              : StyleSheet.absoluteFill,\n          })}\n          className={overlayClassName} asChild={Platform.OS !== 'web'}>\n          <NativeOnlyAnimatedView entering={FadeIn.reduceMotion(ReduceMotion.System)} as=\"Pressable\">\n            <TextClassContext.Provider value=\"text-popover-foreground\">\n              <DropdownMenuPrimitive.Content\n                className={cn(\n                  'bg-popover border-border min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',\n                  Platform.select({\n                    web: cn(\n                      'animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default',\n                      props.side === 'bottom' && 'slide-in-from-top-2',\n                      props.side === 'top' && 'slide-in-from-bottom-2'\n                    ),\n                  }),\n                  className\n                )}\n                {...props}\n              />\n            </TextClassContext.Provider>\n          </NativeOnlyAnimatedView>\n        </DropdownMenuPrimitive.Overlay>\n      </FullWindowOverlay>\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n    className?: string;\n    inset?: boolean;\n    variant?: 'default' | 'destructive';\n  }) {\n  return (\n    <TextClassContext.Provider\n      value={cn(\n        'select-none text-sm text-popover-foreground group-active:text-popover-foreground',\n        variant === 'destructive' && 'text-destructive group-active:text-destructive'\n      )}>\n      <DropdownMenuPrimitive.Item\n        className={cn(\n          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5',\n          Platform.select({\n            web: cn(\n              'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',\n              variant === 'destructive' && 'focus:bg-destructive/10 dark:focus:bg-destructive/20'\n            ),\n          }),\n          variant === 'destructive' && 'active:bg-destructive/10 dark:active:bg-destructive/20',\n          props.disabled && 'opacity-50',\n          inset && 'pl-8',\n          className\n        )}\n        {...props}\n      />\n    </TextClassContext.Provider>\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n    children?: React.ReactNode;\n  }) {\n  return (\n    <TextClassContext.Provider value=\"text-sm text-popover-foreground select-none group-active:text-accent-foreground\">\n      <DropdownMenuPrimitive.CheckboxItem\n        className={cn(\n          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',\n          }),\n          props.disabled && 'opacity-50',\n          className\n        )}\n        {...props}>\n        <View className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n          <DropdownMenuPrimitive.ItemIndicator>\n            <Icon\n              as={Check}\n              className={cn(\n                'text-foreground size-4',\n                Platform.select({ web: 'pointer-events-none' })\n              )}\n            />\n          </DropdownMenuPrimitive.ItemIndicator>\n        </View>\n        <>{children}</>\n      </DropdownMenuPrimitive.CheckboxItem>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n    children?: React.ReactNode;\n  }) {\n  return (\n    <TextClassContext.Provider value=\"text-sm text-popover-foreground select-none group-active:text-accent-foreground\">\n      <DropdownMenuPrimitive.RadioItem\n        className={cn(\n          'active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5',\n          Platform.select({\n            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none',\n          }),\n          props.disabled && 'opacity-50',\n          className\n        )}\n        {...props}>\n        <View className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n          <DropdownMenuPrimitive.ItemIndicator>\n            <View className=\"bg-foreground h-2 w-2 rounded-full\" />\n          </DropdownMenuPrimitive.ItemIndicator>\n        </View>\n        <>{children}</>\n      </DropdownMenuPrimitive.RadioItem>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n    className?: string;\n    inset?: boolean;\n  }) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn(\n        'text-foreground px-2 py-1.5 text-sm font-semibold',\n        inset && 'pl-8',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<typeof Text>) {\n  return (\n    <Text\n      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/dropdown-menu.tsx"
    }
  ],
  "meta": {
    "exports": [
      "DropdownMenu"
    ],
    "api": "<DropdownMenu><DropdownMenuTrigger asChild /><DropdownMenuContent insets><DropdownMenuItem /></DropdownMenuContent></DropdownMenu>"
  },
  "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": [
    "overlays"
  ],
  "type": "registry:ui"
}