{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu",
  "title": "Context menu",
  "description": "long-press",
  "dependencies": [
    "@rn-primitives/context-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/context-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 ContextMenuPrimitive from '@rn-primitives/context-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 ContextMenu = ContextMenuPrimitive.Root;\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\nconst ContextMenuGroup = ContextMenuPrimitive.Group;\nconst ContextMenuSub = ContextMenuPrimitive.Sub;\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  iconClassName,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n    children?: React.ReactNode;\n    iconClassName?: string;\n    inset?: boolean;\n  }) {\n  const { open } = ContextMenuPrimitive.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      <ContextMenuPrimitive.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 && cn('bg-accent', Platform.select({ native: 'mb-1' })),\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      </ContextMenuPrimitive.SubTrigger>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <NativeOnlyAnimatedView entering={FadeIn.reduceMotion(ReduceMotion.System)}>\n      <ContextMenuPrimitive.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 ContextMenuContent({\n  className,\n  overlayClassName,\n  overlayStyle,\n  portalHost,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n    overlayStyle?: StyleProp<ViewStyle>;\n    overlayClassName?: string;\n    portalHost?: string;\n  }) {\n  return (\n    <ContextMenuPrimitive.Portal hostName={portalHost}>\n      <FullWindowOverlay>\n        <ContextMenuPrimitive.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}\n          asChild={Platform.OS !== 'web'}>\n          <NativeOnlyAnimatedView entering={FadeIn.reduceMotion(ReduceMotion.System)} as=\"Pressable\">\n            <TextClassContext.Provider value=\"text-popover-foreground\">\n              <ContextMenuPrimitive.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        </ContextMenuPrimitive.Overlay>\n      </FullWindowOverlay>\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.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      <ContextMenuPrimitive.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 ContextMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.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      <ContextMenuPrimitive.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          <ContextMenuPrimitive.ItemIndicator>\n            <Icon\n              as={Check}\n              className={cn(\n                'text-foreground size-4',\n                Platform.select({ web: 'pointer-events-none' })\n              )}\n            />\n          </ContextMenuPrimitive.ItemIndicator>\n        </View>\n        <>{children}</>\n      </ContextMenuPrimitive.CheckboxItem>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.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      <ContextMenuPrimitive.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          <ContextMenuPrimitive.ItemIndicator>\n            <View className=\"bg-foreground h-2 w-2 rounded-full\" />\n          </ContextMenuPrimitive.ItemIndicator>\n        </View>\n        <>{children}</>\n      </ContextMenuPrimitive.RadioItem>\n    </TextClassContext.Provider>\n  );\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n    className?: string;\n    inset?: boolean;\n  }) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn(\n        'text-foreground px-2 py-2 text-sm font-medium sm:py-1.5',\n        inset && 'pl-8',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuShortcut({ 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  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/context-menu.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ContextMenu"
    ],
    "api": "<ContextMenu><ContextMenuTrigger /><ContextMenuContent insets><ContextMenuItem /></ContextMenuContent></ContextMenu>"
  },
  "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"
}